Angular中如何将子组件内的模板传递给父组件？

这种反向传递子组件模板给父组件渲染的方案是可行的，你遗漏了两个关键步骤，导致模板无法正常显示：

1. 子组件未正确关联模板引用 #

你在子组件类中仅声明了templateToExposeToParent变量，但没有通过@ViewChild将其与模板中的#templateToExposeToParent标识关联，导致组件实例里的这个变量始终是undefined，父组件无法拿到有效的TemplateRef实例。

修正后的子组件类代码：

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

@Component({
  selector: 'app-child-component',
  templateUrl: './child-component.component.html'
})
export class ChildComponent {
  // 通过@ViewChild绑定模板引用标识
  @ViewChild('templateToExposeToParent') templateToExposeToParent!: TemplateRef<any>;
}

子组件模板代码保持不变：

<ng-template #templateToExposeToParent>
  <!-- 这里是你要暴露的任意内容 -->
  <div>子组件内部定义的模板内容</div>
</ng-template>

2. 父组件ngTemplateOutlet绑定语法错误 #

父组件中直接用字符串形式'childComponent.templateToExposeToParent'传递模板引用是错误的，需要使用**属性绑定（方括号[]）**来解析表达式，让Angular能正确识别子组件实例中的模板引用。

修正后的父组件模板代码：

<app-child-component #childComponent></app-child-component>

<!-- 其他用于分隔的父组件内容 -->
<div>父组件的其他页面内容</div>

<!-- 使用属性绑定传递子组件的模板引用 -->
<ng-container [ngTemplateOutlet]="childComponent.templateToExposeToParent"></ng-container>

补充说明 #

• @ViewChild会在子组件ngAfterViewInit生命周期钩子完成后赋值，Angular的模板绑定会自动处理时机问题，只要子组件实例已创建，就能正确获取到模板引用。
• 如果需要给子组件模板传递上下文数据，可以额外添加[ngTemplateOutletContext]属性，用法与正向传递模板时一致。

内容的提问来源于stack exchange，提问作者Mickael Caruso