Question

我想让父组件拥有一个模板来传递给子组件（在这种情况下为ReceiverComponent），该模板应该在ngFor中显示

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

在子级中使用结构化的指令模板

1 个答案: