動的コンテンツを作成するときに関数を定義する場所

Question

これは、this questionのフォローしています。私は先週投稿しました.Gunterのおかげで今まで助けてくれました。達成しようとしているのは、私の動的コンテンツで使用できる関数を定義する場所です。ここに私がこれまで持っているものがあります。あなたは私がどこに使用しようとしているbtnOnClickTestと呼ばれるテストのための関数を定義していることがわかります上

<div *ngFor="let item of [1,2,3,4,5,6]"> 
     <template [delay]="500 * item" let-loaded="loadTime" let-events="events"> 
       <card [subject]="events"> 
      <div class="main"> 
       <button (click)="btnOnClickTest()">{{item}}</button> 
      </div> 
      <div class="sub">{{loaded | number:'1.4-4'}}</div> 
      </card> 
     </template> 
    </div> 

今delay.directive

import { Directive, Input, TemplateRef, ViewContainerRef} from '@angular/core'; 
import { CardComponent }         from './card.component'; 
import { Subject }           from 'rxjs/Subject'; 

export class DelayContext { 
    public events: Subject<any> = new Subject(); 
    constructor(private loadTime: number) {} 

    public btnOnClickTest() { 
    console.log('Testing....') 
    } 
} 

@Directive({ selector: '[delay]'}) 
export class DelayDirective { 
    constructor(
    private templateRef: TemplateRef<DelayContext>, 
    private viewContainerRef: ViewContainerRef 
) {} 

    public btnOnClickTest() { 
    console.log('Testing....') 
    } 

    @Input('delay') 
    set delayTime(obj) { 
    console.log('delay', obj); 
    setTimeout(
    () => { 
     let context = new DelayContext(performance.now()); 
     context.events.subscribe(e => console.log(`event`, obj, e)); 
     let embedView = this.viewContainerRef.createEmbeddedView(this.templateRef, context); 
     console.log('embedView', embedView); 
     }, 
     obj.time); 
    } 

    @Input('delayFoo') 
    set setFoo(obj) { 
    console.log('obj', obj) 
    } 
} 

：card.componentの使用とdelay.directiveしますhome.component.html動的コンテンツが挿入されます。

今私は

Plunker

Answer 1

...おそらくこれは、この接近する正しい方法ではないことを考えている私は、観測可能で、ボタンを接続するための小さな修正としてサブスクリプションをしましたbtnOnClickTest()方法

Plunker example

は、より良い方法があるかもしれません。私はAngular2のこの部分に精通していません。