javascript - 当 ngIf 变为 true 时触发函数以将焦点设置在显示的输入上

Question

我目前正在尝试将光标设置在特定输入字段上，该输入字段仅在周围的 ngIf 为真时显示。
html 代码看起来像这样:

<div>
    <button (click)="showFirst = !showFirst">Toogle</button>
    <div *ngIf="showFirst">
        <!-- Some content -->
    </div>
    <div *ngIf="!showFirst">
        <input type="text" #myInput>
    </div>
</div>

在我的组件 JS 中，我试图获取 ElementRef 但它一直返回 undefined 因为我试图在它初始化之前获取它。
所以问题是:

如何在 showFirst 变为 false 并且输入可见后将焦点设置在输入字段上？

Answer 1

可以在AfterViewChecked生命周期 Hook 中设置焦点，如this plunker所示.我添加了一个检查以确保只有当输入元素变得可见时才设置焦点，而不是每次触发 AfterViewChecked 时。

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

export class MyComponent implements AfterViewChecked {

  @ViewChild("myInput") private myInput: ElementRef;

  public showFirst = true;
  private prevShowFirst = true;

  public ngAfterViewChecked(): void {
    if (!this.showFirst && this.prevShowFirst) {
      this.myInput.nativeElement.focus();
    }
    this.prevShowFirst = this.showFirst;
  }
}