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

Question

与 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>

Answer 1

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

• HTML autofocus 属性
• JS input.focus()
• cdkFocusInitial 来自 @angular/cdk

上述所有方法都可能有效，但在某些情况下它们似乎被破坏了。

始终和始终有效的是使用matInput 的高级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>

当然，将选择器命名为 matInputAutofocus 是危险的，因为 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>