Angular.js 2：ディレクティブのアクセスコンポーネント

Question

はParentさんの次のスニペットのテンプレートを考えてみましょう：

<div *ngFor= "let event of events" > 
    <event-thumbnail [theEvent] = 'event'></event-thumbnail>      
</div> 

またevent-thumbnailコンポーネント定義は次のとおりです。Parentコンポーネントクラスで

export class EventThumbnailComponent{ 
    intoroduceYourself(){ 
     console.log('I am X'); 
    } 
} 

、私が欲しいですすべての生成されたevent-thumbnail要素を繰り返し処理し、それぞれの下のコンポーネントにアクセスし、そのうちの1つにintroduceYourself関数を呼び出します。

Answer 1

：その後、次のライフサイクルフックを使用することができますこのコンポーネントのインスタンスがビューに追加またはビューから削除されるたびに更新されます。 eventThumbnailsはngAfterViewInitまで設定されていないことに注意してください。

詳しくはこちらのドキュメントを参照してください：の https://angular.io/docs/ts/latest/api/core/index/ViewChildren-decorator.html

Answer 2

渡す予定のイベントにアクセスするには、子コンポーネントに@Input() theEventが必要です。

class ParentComponent implements AfterViewInit { 
    @ViewChildren(EventThumbnailComponent) 
    eventThumbnails: QueryList<EventThumbnailComponent>; 

    ngAfterViewInit(): void { 
     // Loop over your components and call the method on each one 
     this.eventThumbnails.forEach(component => component.introduceYourself()); 

     // You can also subscribe to changes... 
     this.eventThumbnails.changes.subscribe(r => {    
      // Do something when the QueryList changes 
     }); 
    } 
} 

eventThumbnailsプロパティは以下となります。あなたはビュー内の特定のコンポーネントタイプのすべてのインスタンスのリストを取得するには@ViewChildren()デコレータを使用したい

ngOnInit(){ 
    introduceYourself(){ 
     console.log('I am X'); 
    } 
}