angular - 如何在Angular 6中的click事件上对matInput元素设置自动对焦？

与Google登录页面类似，单击事件后，我希望自动聚焦于输入元素。我尝试了@ViewChild('id')和document.getElementId('id')。两者都不起作用。它始终为null或未定义。我怎样才能做到这一点？

       <mat-form-field class="example-full-width col-sm-4">
        <input autofocus id="login-username" matInput
       formControlName="userName" minlength="5" maxlength="20"
       name="userName" placeholder="Username" required #input>
      </mat-form-field>

        <div class="col-sm-12">
           <button (click)="changeView()" type="button" mat-raised-
             button color="primary">Next</button>
          </div>

         <mat-form-field class="example-full-width col-sm-4"
          #passwordInput>
        <input autofocus type="password" matInput
       placeholder="Password" minlength="5" maxlength="20"
       formControlName="userPassword" #passwordInput>
      </mat-form-field>

最佳答案

不幸的是，并不是所有的解决方案在渲染时都能始终与自动对焦的matInput一起使用。这是我尝试过的:

HTML autofocus属性

JS input.focus()

中的

cdkFocusInitial

以上所有方法都可以使用，但是在某些情况下它们似乎被破坏了。
以及始终对和始终起作用的方法是使用@angular/cdk的高级api。这是使用此方法的简单指令:

import { Directive, OnInit } from '@angular/core';
import { MatInput } from '@angular/material/input';

@Directive({
  selector: '[matInputAutofocus]',
})
export class AutofocusDirective implements OnInit {

  constructor(private matInput: MatInput) { }

  ngOnInit() {
    setTimeout(() => this.matInput.focus());
  }

}

需要超时才能延迟对元素的聚焦，因为matInput在创建时仍无法正常运行。用法:

<mat-form-field>
  <input type="text" matInput matInputAutofocus>
</mat-form-field>

当然，命名选择器matInput是很危险的，因为 Material 本身可能有一天会出现在此解决方案中。使用它需要您自担风险，或仅使用前缀重命名(推荐)。
聚焦并同时选择输入值
蛋糕上的樱桃增加了也可以预选择输入内容的可能性(这在大多数情况下更方便用户使用)，这会稍微改变实现:

import { Directive, OnInit } from '@angular/core';
import { MatInput } from '@angular/material/input';

@Directive({
  selector: '[matInputAutofocus]',
})
export class AutofocusDirective implements OnInit {

  @Input()
  autofocusSelectValue = false;

  constructor(
    private matInput: MatInput,
    private elRef: ElementRef<HTMLInputElement>,
  ) { }

  ngOnInit(): void {
    setTimeout(() => {
      this.matInput.focus();

      if (this.autofocusSelectValue) {
        this.elRef.nativeElement.setSelectionRange(0, input.value.length);
      }
    });
  }

}

用作:

<mat-form-field>
  <input type="text" matInput matInputAutofocus [autofocusSelectValue]="true">
</mat-form-field>

关于angular - 如何在Angular 6中的click事件上对matInput元素设置自动对焦？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/51510936/