将焦点设置为以反应形式 angular 动态创建的输入

Question

首先将项目切换为是，然后单击“添加行”按钮。 将创建新行，它应该始终将焦点设置在最后创建的名称输入字段上。 这是 stackblitz 链接集中在名称字段上

图片描绘了场景

Answer 1

您可以创建自定义指令以获取输入元素引用，然后在其上调用焦点方法。

尝试这个：

import { Directive,ElementRef } from '@angular/core';
import { AfterViewInit } from '@angular/core/src/metadata';

@Directive({
  selector: '[appAutoFocus]'
})
export class AutoFocusDirective implements AfterViewInit {

  constructor(private element:ElementRef) {}

   ngAfterViewInit(){
     this.element.nativeElement.focus();
   }
} 

分叉的工作 Stackblitz