Angular动态组件：如何结合父组件注入器添加可投影节点？

要解决这个问题，核心思路是先创建父组件并获取其注入器，再基于父组件的注入器创建子组件，这样子组件就能继承父组件的DI上下文，同时将子组件节点作为投影内容插入父组件。具体步骤如下：

1. 创建父组件（先不设置投影节点） #

首先创建父组件实例，确保它拥有正确的环境注入器和上级注入器（如果需要）：

const parentComp = createComponent(ParentComponentType, {
  environmentInjector: this.appRef.injector,
  elementInjector: parentComponentInjector // 父组件的上级注入器（如当前组件的注入器）
});

2. 基于父组件注入器创建子组件 #

利用父组件自身的injector创建子组件，这样子组件就能接入父组件的层级依赖注入，可正常注入父组件提供的服务或实例：

// 单个子组件示例
const childComp = createComponent(ChildComponentType, {
  environmentInjector: this.appRef.injector,
  elementInjector: parentComp.injector // 关键：使用父组件的注入器
});

// 多个子组件示例
const childComps = [ChildComp1, ChildComp2].map(compType => 
  createComponent(compType, {
    environmentInjector: this.appRef.injector,
    elementInjector: parentComp.injector
  })
);

3. 将子组件节点设置为父组件的投影内容 #

通过父组件的hostView.setProjectableNodes()方法，将子组件的宿主节点作为投影内容传入：

// 单个子组件的投影节点
parentComp.hostView.setProjectableNodes([childComp.hostView.rootNodes]);

// 多个子组件的投影节点（对应父组件中多个ng-content插槽）
const projectableNodes = childComps.map(comp => comp.hostView.rootNodes);
parentComp.hostView.setProjectableNodes(projectableNodes);

4. 挂载父组件到DOM #

最后将父组件的宿主节点添加到目标DOM容器，并关联到应用引用：

this.appRef.attachView(parentComp.hostView);
targetDomElement.appendChild(parentComp.hostView.rootNodes[0]);

原理说明 #

• 子组件通过父组件的elementInjector创建，其DI上下文会继承父组件的依赖层级，解决了无法注入父组件相关依赖的问题。
• 通过setProjectableNodes方法动态设置投影内容，无需在创建父组件前提前创建子组件，完美结合了投影功能与Angular的层级DI机制。

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