How to set focus on specific input?

问题:

So i have loop where i have list of inputs. I have directive for focus but i want to add focus on specific input. This is my plunker:

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'}
];

Any suggestion how can i do that?

回答1:

You can add

@Input()
focusOnInit:number;

and

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

to the focusOnInit directive and then pass an id like

[focusOnInit]="input.id"

In the parent component you can query all focusOnInit directives

@ViewChildren(FocusOnInit) focusDirectives: FocusOnInit[];

when you want to set the focus on a specific input use

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