角度* 2のテンプレート変数はどのように動作しますか？

Question

メインコンポーネント：

Htmlの上記のコードで

<event-thumbnail *ngFor='let event1 of events' #thumbnail [event2]="event1" (eventClick)='handleEventClicked($event)'>Hello</event-thumbnail> 
<button class='btn btn-primary' (click)="thumbnail.alertFoo()">alert id</button> 
<button class='btn btn-primary' (click)='thumbnail.handleClickMe()'>click me!</button> 

イベントサムネイルComponenent

alertFoo(){ 
    alert("id called"); 
    } 

    handleClickMe(){ 
    this.eventClick.emit('foo'); 
    alert('click'); 
    } 

私はサムネイルを使用して、ボタンを使用することができません - >テンプレート変数* ngForすなわちを使用。 alertFooとhandleClickMe（）はサムネイルで呼び出されません。私はdivの中にそれをラップしようとしましたが、まだそれは動作しません。それは、div内のコード全体を* ngForで囲んでいるとき、つまり望ましくない複数のボタンを表示するボタンの場合にのみ機能します。私は、イベントを繰り返すが、ボタンは一度しか表示されないようにするために、ngForワークがどのように動作するかを理解したい。

Answer 1

この目的でViewChildを使用してください。ここに例があります。あなたのコンポーネントの名前の正確さを知らないので、ここではダミーの名前を使用しています。だから、親：

テンプレート：

<button (click)="alertFooInChild()">Click</button> 

TS：

@ViewChild(AppChild) appChild: AppChild; 

alertFooInChild() { 
    // call the method in the child 
    this.appChild.alertFoo(); 
} 

はここだ、これらのメソッドは実際には何demo plunker :)