Question

在我的应用程序中，我有一个输入元素，当我单击按钮时它是可见的，而当我单击另一个按钮时它是隐藏的。我通过一个简单的ng-template意识到了这一点。我想在此输入变为可见时为其设置焦点。我将autofocus参数设置为输入，但是如果我多次切换可见性（输入失去焦点），该参数将不起作用。我已经尝试过此SO问题中描述的替代方法（ViewChild，Renderer2），但它也不起作用。

app.component.html

<div *ngIf="!isInputVisible; else inputTemplate">Input goes here after click!</div>

<button (click)="toggleInputVisibility()">Toggle input</button>

<ng-template #inputTemplate>
  <input type="text" autofocus>
</ng-template>

app.component.ts：

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  public isInputVisible: boolean = false;

  public toggleInputVisibility(): void {
    this.isInputVisible = !this.isInputVisible;
  }
}

工作stackblitz。

Answer 1

基于the description of the autofocus attribute，它应该仅关注“页面加载”样式功能，而不是创建/删除内容时。

页面上显示+后，您可以将@ContentChild与this.contentChild.nativeElement.focus()一起使用。

您还可以从QueryList订阅@ContentChildren来触发焦点（found here）。

Answer 2

如果您仍在寻找解决方案，这可能会有所帮助。我使用 @ViewChild 装饰器来获取输入元素并将焦点设置在它上面。我在这里使用延迟使其异步。您也可以使用检测更改。

修改了您的 stackblitz。

每次在ng-template

2 个答案: