如何在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

遗憾的是，所有其他解决方案在渲染时无法使用自动对焦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是危险的，因为材料本身有一天可以来到这个解决方案。使用它需要您自担风险，或者只使用您的前缀重命名（推荐）。

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

你需要使用模板引用输入元素然后使用它将工作的ViewChild

示例：https://stackblitz.com/edit/angular-frqm8b

 <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" 
          >
        <input autofocus type="password" matInput 
        ****#passwordInput****
       placeholder="Password" minlength="5" maxlength="20" 
       formControlName="userPassword" #passwordInput>  
      </mat-form-field>