在創建動態內容時在哪裏定義功能

這是我上週發佈的this question的一個後續內容，感謝Gunter直到現在爲止他的幫助。我想要實現的是在哪裏定義一個函數，我可以在我的動態內容中使用它。這是迄今爲止我所擁有的。該home.component.html這使得使用card.component和delay.directive：在創建動態內容時在哪裏定義功能

<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) 
    } 
}

在上面，你可以看到，我定義了用於測試的函數調用btnOnClickTest這是我想要使用其中插入動態內容。

現在我在想，也許這並不是處理這個正確的方式...

Plunker

來源

2016-12-06 Katana24

我只是做了一個小的修改按鈕與觀察到的，與訂閱連接該btnOnClickTest()方法

Plunker example

有可能是一個更好的辦法。我對Angular2的這一部分並不是很熟悉。

來源

2016-12-06 10:52:49

在創建動態內容時在哪裏定義功能

回答

相關問題