如何导出结构指令属性以用于模板?
问题描述:
我有这样的结构指令:如何导出结构指令属性以用于模板?
@Directive({
// tslint:disable-next-line:directive-selector
selector: '[cycle]'
})
export class CycleDirective {
private cycle$: any;
constructor(
private tRef: TemplateRef<any>,
private vcRef: ViewContainerRef) { }
@Input() cycleInterval: number | Observable<any> = 1000;
@Input() set cycle(source: Array<any[]>) {
const interval$ = ofType(Number, this.cycleInterval) ?
Observable.timer(0, this.cycleInterval as number) : this.cycleInterval;
if (!hasProperty(interval$, 'subscribe')) {
throw new Error('Input interval must be Number or Observable');
}
this.cycle$ = Observable.of(source)
.combineLatest(interval$ as Observable<any>)
.map(([items, index]) => items[cycle(index - 1, items.length)])
.forEach(item => {
this.vcRef.clear();
this.vcRef.createEmbeddedView(this.tRef);
});
}
}
如何导出当前项目,指数(或任何东西),以便能够在模板中使用它?
<div *cycle="['a', 'b', 'c']; interval: 2000">
testing: <!-- current item -->
</div>
理想情况下,应该使用像ngFor
:
<div *cycle="let item of ['a', 'b', 'c']; interval: 2000">{{ item }}</div>
答
你可以试试:
this.vcRef.createEmbeddedView(this.tRef, { $implicit: item, index: index });
而且在模板:
*cycle="['a', 'b', 'c']; interval: 2000; let item; let i = index"
您的需求:
directive.ts
@Directive({
// tslint:disable-next-line:directive-selector
selector: '[cycle][cycleOf]'
^^^^^^ but we can omit this
})
export class CycleDirective {
private cycle$: any;
constructor(
private tRef: TemplateRef<any>,
private vcRef: ViewContainerRef) { }
@Input() cycleInterval: number | Observable<any> = 1000;
@Input() set cycleOf(source: Array<any[]>) {
^^^ required
...
this.vcRef.createEmbeddedView(this.tRef, { $implicit: item, index: index });
...
}
}
父母template.html:
<div *cycle="let item of ['a', 'b', 'c']; interval: 2000; let i = index">
{{ item }} {{ i }}
</div>
也见
个
谢谢,我会尝试这个... – Sasxa
完美的作品(: – Sasxa
不客气! – yurzui