автофокус не работает после удаления и добавления снова в дом

Question

Я пытаюсь установить фокус на шоу:

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

это работа только при первом нажатии.

stackbliz

Answer 1

Вы можете программно вызывать метод фокусировки 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>

TS:

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


@Component({
  selector: 'input-overview-example',
  styleUrls: ['input-overview-example.css'],
  templateUrl: 'input-overview-example.html',
})
export class InputOverviewExample {

  @ViewChild("ref",null) refField: ElementRef;

  focus(): void {
    setTimeout(() => {
      this.refField.nativeElement.focus();
    }, 100);
  }
}

Answer 2

Мы можем выполнить все связанные с DOM операции в Angular с помощью декоратора @ViewChild, который происходит от 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 отображается в локальном браузере