如何关注具体输入？

Question

所以我有循环，我有输入列表。我有重点指令，但我想重点关注具体的输入。这是我的傻瓜：

https://plnkr.co/edit/POP7Fh6G2bWhBEPBkTSm?p=preview

 <div *ngFor="let input of inputs">
      <input type="text" focusOnInit>
    </div>
  inputs  = [
    {name:'Superman'},
    {name:'Batman'},
    {name:'BatGirl'},
    {name:'Robin'},
    {name:'Flash'}
];

有任何建议我该怎么做？

Answer 1

您可以添加

@Input()
focusOnInit:number;

和

focus() {
  this.renderer.invokeElementMethod(
    this.elementRef.nativeElement, 'focus', []);
}

到focusOnInit指令，然后传递像

这样的id

[focusOnInit]="input.id"

在父组件中，您可以查询所有focusOnInit指令

@ViewChildren(FocusOnInit) focusDirectives: FocusOnInit[];

如果要将焦点设置在特定输入上

focus(id) {
  var input = this.focusDirectives.toArray().find((f) => f.focusOnInit === id);
  if(input) {
    input.focus();
  }
}