如何在角度动态表单上做AutoFocus

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

@Component({
  selector: 'app-dynamic-form',
  template: `
    <form #form="ngForm">
      <input *ngIf="showInput" #inputElement type="text" name="inputField">
    </form>
  `
})
export class DynamicFormComponent implements AfterViewInit {
  @ViewChild('inputElement', { static: false }) inputElement: ElementRef;
  showInput = false;

  ngAfterViewInit() {
    setTimeout(() => {
      this.showInput = true;
      this.inputElement.nativeElement.focus();
    }, 0);
  }
}

import { Component, Renderer2, AfterViewInit } from '@angular/core';

@Component({
  selector: 'app-dynamic-form',
  template: `
    <form #form="ngForm">
      <input *ngIf="showInput" type="text" name="inputField">
    </form>
  `
})
export class DynamicFormComponent implements AfterViewInit {
  showInput = false;

  constructor(private renderer: Renderer2) {}

  ngAfterViewInit() {
    setTimeout(() => {
      this.showInput = true;
      const inputElement = document.querySelector('input[name="inputField"]');
      this.renderer.selectRootElement(inputElement).focus();
    }, 0);
  }
}