如何在Angular 6中的click事件上对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

当您使用 Angular Material 时，您可以使用cdkFocusInitial来告诉库在组件准备好后您想要关注的位置。不需要本机方法：

<mat-form-field class="example-full-width">
  <mat-label>My Label</mat-label>
  <textarea 
    cdkFocusInitial           <---------
    cdkTextareaAutosize
    matInput>
  </textarea>
</mat-form-field>

Answer 2

如果您想在页面加载后立即将焦点设置到输入字段，您只需将 HTML 属性应用于该元素即可，例如：

<input type="text" #input1 autofocus>

否则，如果您想从 component.ts 有条件地执行此操作，请使用：

    import { Component, ElementRef, ViewChild, AfterViewInit} from 
    '@angular/core';
    ... 

 @ViewChild('input1') inputEl:ElementRef;

 ngAfterViewInit() {
 this.inputEl.nativeElement.focus();
 }

或者你可以使用：

首先从@angular/core 导入renderer2，然后，

    const element = this.renderer.selectRootElement('#input1');

 setTimeout(() => element.focus(), 0);

无论您似乎对现有代码感到满意。

Answer 3

不幸的是，所有其他解决方案在渲染时均无法与自动对焦的matInput一起使用。

原因是应该使用matInput的高级api而不是尝试集中输入本身。

应该做的是打电话给matInput.focus()。这是使用此方法的简单指令：

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

@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是很危险的，因为材料本身可能有一天会出现在此解决方案中。使用它需要您自担风险，或仅使用前缀重命名（推荐）。