在 child 中使用结构的指令模板

Question

我想要一种方法让 parent 组件拥有一个模板以传递给 child 组件（在本例中为 ReceiverComponent），应该在 [=17] 中显示它=]

@Directive({ selector: '[appSelector]' })
export class SelectorDirective<T> {
    constructor(
        public template: TemplateRef<T>
    ) {
        console.log(this.template);
    }
}

<app-receiver>
  <div *appSelector="let item">Directive-template: {{item}}</div>
</app-receiver>

@Component({
    selector: 'app-receiver',
    templateUrl: './reciver.component.html', // Bellow
})
export class ReceiverComponent implements AfterContentInit {
    @ContentChild(SelectorDirective, { static: false }) item!: SelectorDirective<string>;

    items = Array.from({length: 10}).map((_, i) => `Item #${i}`);

    ngAfterContentInit() {
        console.log(this.item); // It is instance of the SelectorDirective
    }

}

<ng-template let-item #template>
    <div>inline-template: {{item}}</div>
</ng-template>

<div *ngFor="let item of items">
  <ng-container
    [ngTemplateOutlet]="template"
    [ngTemplateOutletContext]="{$implicit: item, odd: odd}"
  ></ng-container>
  <ng-container
    [ngTemplateOutlet]="item.template"
    [ngTemplateOutletContext]="{$implicit: item, odd: odd}"
  ></ng-container>
</div>

我创建了一个最小的应用程序来调试这里的问题：https://stackblitz.com/edit/angular-whrjhr

另外，有没有办法直接将模板传递给 ngFor，这样我就不必指定所有应该进入上下文的项目？

<ng-container
  [ngForOf]="items"
  [ngForTemplate]="template"
></ng-container>

Answer 1

ngFor 正在设置变量 item，因此 item.template 未定义...

<div *ngFor="let value of items">
  <ng-container
    [ngTemplateOutlet]="template"
    [ngTemplateOutletContext]="{$implicit: value, odd: odd}"
  ></ng-container>
  <ng-container
    [ngTemplateOutlet]="item.template"
    [ngTemplateOutletContext]="{$implicit: value, odd: odd}"
  ></ng-container>
</div>

在 child 中使用结构的指令模板

Use structural's directive template in child

angular

angular2-template

angular2-directives