1
Это сообщение this question Я отправил на прошлой неделе и благодаря Гюнтеру за его помощь до сих пор. То, что я пытаюсь достичь, - это определить функцию, которую я могу использовать в своем динамическом контенте. Вот что я до сих пор. 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, которую я пытаюсь использовать, где динамический контент вставляется.
Теперь я думаю, что, возможно, это не правильный способ приближения к этому ...