1
這是我上週發佈的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
這是我想要使用其中插入動態內容。
現在我在想,也許這並不是處理這個正確的方式...