Question

我有这个结构指令：

@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>

Answer 1

您可以尝试：

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>

另见

Angular2: How is ngfor expanded

如何导出结构指令属性以在模板中使用？

1 个答案: