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，因为我尝试在初始化之前获取它。
所以qustion是：

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

Answer 1

您可以在AfterViewChecked生命周期挂钩中设置焦点，如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;
  }
}

Answer 2

您可以使用自动对焦属性。或者，如果showFirst为false，则只需在（单击）结尾处添加setFocus

Answer 3

您可以尝试在OnChanges生命周期钩子中获取ElementRef。类似的东西：

OnChanges(): void {
  if (!this.showFirst) {
    // check ElementRef
  }
}

Answer 4

Angular有一个生命周期钩ngAfterViewChecked，在每次检查组件的视图后都会调用它。

更改视图后，将调用此生命周期挂钩，此处您可以编写聚焦逻辑。

ngAfterViewChecked(){
  // you logic for focusing or check ElementRef.
}

当ngIf变为true时，触发功能将焦点设置为显示的输入

4 个答案: