Angular 删除并再次添加到dom后自动聚焦不起作用

我试图将焦点放在节目上：

<div>
  <div style="height: 50px; width: 100%" (click)="inEdit=true">
    <div *ngIf="!inEdit">
      bla
    </div>
    <mat-form-field *ngIf="inEdit">
      <input (blur)="inEdit=false" 
      autofocus matInput >
    </mat-form-field>
  </div>
</div>

布拉

只有在第一次单击时才可以工作

---

您可以随时以编程方式调用HTML元素的焦点方法

试试这个：

模板：

<div>
   <button mat-raised-button color="primary" (click)="inEdit=true;focus()">Edit</button>
  <div style="height: 50px; width: 100%" (click)="inEdit=true">
    <mat-form-field *ngIf="inEdit">
      <input #ref matInput >    
    </mat-form-field>
  </div>
</div>

---

我们可以在Angular中使用@ViewChild装饰器来实现所有与DOM相关的操作，该装饰器来自Angular core

相关模板

HTML:

<input type="text" #inputName>

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

@ViewChild('inputName') inputEl:ElementRef;

ngAfterViewInit() {
      setTimeout(() => this.inputEl.nativeElement.focus());
}

使用此ElementRef，我们可以进行动态DOM（组件）渲染

确保在使用ElememntRef之前，所有DOM都在本地浏览器中呈现

---

奇怪。只要您在输入字段内单击，然后再次从中单击，它就可以在其他单击中工作。这是由于角度变化检测。因此，您必须等到下一次检测运行。只需在setTimeout（）中包装“this.refField.nativeElement.focus（）”。比如：setTimeout（（）=>{this.refField.nativeElement.focus（）；}）；修改了答案。选中OK，解决方案是在setter中执行：

@ViewChild（'ref'）set refField（ref）{if（！ref）return；ref.nativeElement.focus（）}

谢谢@yantrab:）。我不知道。@AdritaSharma最好在答案中添加一些解释，这有助于理解您编写的代码！

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

@ViewChild('inputName') inputEl:ElementRef;

ngAfterViewInit() {
      setTimeout(() => this.inputEl.nativeElement.focus());
}