ループの最初の入力要素にオートフォーカスを追加する方法は？

Question

だから私はループと表示入力をしていると私は最初の入力要素にフォーカスを追加するをクリックして選択したい。どのように私は最初の要素を選択し、彼のオートファーカスを追加することができます任意の提案？

Answer 1

ここで行う方法です。あなたのコンポーネントに

import {Directive, Renderer, ElementRef, OnInit, AfterViewInit, Input} from '@angular/core'; 

@Directive({ 
    moduleId: module.id, 
    selector: '[focusOnInit]' 
}) 
export class FocusOnInitDirective implements OnInit, AfterViewInit { 
    @Input() focusOnInit ; 

    static instances: FocusOnInitDirective[] = []; 

    constructor(public renderer: Renderer, public elementRef: ElementRef) { 
    } 

    ngOnInit(): void { 
    FocusOnInitDirective.instances.push(this) 
    } 

    ngAfterViewInit(): void { 
    setTimeout(() => { 
     FocusOnInitDirective.instances.splice(FocusOnInitDirective.instances.indexOf(this), 1); 
    }); 

    if (FocusOnInitDirective.instances.every((i) => i.focusOnInit===0)) { 
     this.renderer.invokeElementMethod(
     this.elementRef.nativeElement, 'focus', []); 
    } 
    } 
} 

：ディレクティブを書く

import { Component } from '@angular/core'; 
@Component({ 
    moduleId: module.id, 
    selector: 'app', 
    template: ` 
    <div *ngFor="let input of [1,2,3,4]; let i=index"> 
     <input type="text" [focusOnInit] = i > 
    </div> 
    ` 
}) 
export class AppComponent { 

} 

this

から適応対応 plunker、