angular - 将 ng-template 从父级传递给子级

Question

你好 Angular 社区，

我想将 ng-template 从父组件传递给子组件，如下例所示：

#app.component：

    <app-parent>
        <ng-template #itemTemplate let-item>
              <div class="myClass">{{ item.name }}</div>
        </ng-template>
    </app-parent>

家长：

TS：

item: Item;
@ContentChild('itemTemplate', { static: false }) itemTemplateRef: TemplateRef<any>;

模板：

<ng-container [ngTemplateOutlet]="itemTemplateRef" [ngTemplateOutletContext]="{$implicit: item}"></ng-container>

到目前为止一切正常，ng-template 被正确注入到父组件中，但是如果我们不想在父组件中使用它，而是将它注入到它的子组件中，这样父组件就会变成这样：

新家长：

TS：

item: Item;
@ContentChild('itemTemplate', { static: false }) itemTemplateRef: TemplateRef<any>;

模板：

<child>
    <ng-container [ngTemplateOutlet]="itemTemplateRef" [ngTemplateOutletContext]="{$implicit: item}"></ng-container>
</child>

所以孩子将与老父母相同：

孩子：

TS：

item: Item;
@ContentChild('itemTemplate', { static: false }) itemTemplateRef: TemplateRef<any>;

模板：

<ng-container [ngTemplateOutlet]="itemTemplateRef" [ngTemplateOutletContext]="{$implicit: item}"></ng-container>

所以它不起作用我只想配置 PARENT 以将<ng-template #itemTemplate>正确传递给 CHILD

标签： angularangular8angular9angular10ng-template