Angular 每次在ng模板内设置输入焦点

在我的应用程序中，我有一个输入元素，当我点击按钮时它是可见的，当我点击另一个按钮时它是隐藏的。我用一个简单的ng模板实现了这一点。我想设置这个输入的焦点，只要它变得可见。我将

autofocus

参数设置为input，但如果我多次切换可见性（输入失去了焦点），则该参数不起作用。我尝试过这个问题中描述的备选方案（

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>

工作。

基于，它应该只关注“页面加载”样式的功能，而不是在创建/删除内容时

在页面上显示后，您可以将

@ContentChild

与

this.ContentChild.nativeElement.focus（）一起使用

您还可以从
@ContentChildren
订阅
QueryList
来触发焦点（）。
基于，它应该只关注“页面加载”样式的功能，而不是在创建/删除内容时

在页面上显示后，您可以将
@ContentChild
与
this.ContentChild.nativeElement.focus（）一起使用

您还可以从
@ContentChildren
订阅
查询列表
，以触发焦点（）

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;
  }
}