如何让Angular组件B获取组件C的ng-template并传递给组件A渲染？

要实现组件C传递ng-template给组件B，再由组件B传给组件A（p-pickList）渲染，核心是通过内容投影+模板引用传递完成，具体步骤如下：

1. 改造组件B，接收并转发模板 #

组件B需要先捕获组件C传入的ng-template，再将其传递给p-pickList的指定模板位置：

组件B的TypeScript代码 #

import { Component, ContentChild, TemplateRef } from '@angular/core';

@Component({
  selector: 'component-b',
  templateUrl: './component-b.component.html'
})
export class ComponentBComponent {
  // 通过@ContentChild获取组件C投影进来的ng-template
  @ContentChild(TemplateRef) itemTemplate?: TemplateRef<any>;
}

组件B的模板代码 #

在p-pickList内部保留它识别的#item模板标识，通过ngTemplateOutlet渲染从组件C拿到的模板，同时传递p-pickList提供的上下文数据（比如列表项item）：

<p-pickList>
  <!-- 保留p-pickList需要的#item模板，内部转发组件C的自定义模板 -->
  <ng-template #item let-item>
    <ng-template 
      [ngTemplateOutlet]="itemTemplate" 
      [ngTemplateOutletContext]="{ $implicit: item }"
    ></ng-template>
  </ng-template>
</p-pickList>

2. 组件C传递自定义模板 #

在组件C的模板中，直接向component-b投影自定义的ng-template即可：

<component-b>
  <ng-template let-item>
    <!-- 这里写你需要渲染的自定义内容，示例如下： -->
    <div class="custom-item">
      <span>{{item.label}}</span>
      <button (click)="handleItemSelect(item)">选中</button>
    </div>
  </ng-template>
</component-b>

关键注意点 #

• 如果p-pickList的模板需要更多上下文参数，只需在ngTemplateOutletContext中添加对应键值对，组件C的模板通过let-参数名接收即可。
• 若存在多个模板传递场景，可给模板添加引用名，通过@ContentChild('模板名')精准捕获。

内容的提问来源于stack exchange，提问作者Yaser Torfi