Angular指令动态注入组件报错componentFactory.create is not a function解决

我在模板中的简化HTML结构如下：

<div>
  <grid
    class="enhanced"
    enhancedGrid
    [infoTooltipContainer]="infoTooltipViewRef"
  >
  </grid>
</div>
<div #infoTooltip></div>

在组件文件中，通过常规方式获取infoTooltip元素的ViewContainerRef：

@ViewChild('infoTooltip', { static: true, read: ViewContainerRef }) infoTooltipViewRef!: ViewContainerRef;

将该变量赋值给指令的输入属性供后续使用。网格部分单元格包含简单图标，鼠标悬停时显示工具提示，工具提示内容可以是字符串或自定义组件。自定义组件按标准方式（html、css、ts、module）定义，且可能存在多个这类组件。

为给tooltip分配组件，我在网格组件的ts文件中注入组件：

customTooltipComp: InfoTooltipComponent = inject(InfoTooltipComponent);

并在声明tooltip时使用它：

{
      name: 'feb - 8',
      columnField: 'feb',
      rowField: 'id',
      rowValue: 8,
      icon: '<span class="material-symbols-outlined">info</span>',
      content: this.customTooltipComp,
    }

在指令中，鼠标悬停图标时，若content变量类型不是字符串，尝试通过以下方式创建自定义组件：

config.infoTooltipContainer.createComponent(tooltip.content);

其中infoTooltipContainer是来自指令输入属性的ViewContainerRef（已通过console.log验证），但执行该行代码时出现错误：componentFactory.create is not a function，请问该如何解决？

• 核心问题：传递的是组件实例而非组件类
  你用inject(InfoTooltipComponent)获取的是组件的实例对象，但ViewContainerRef.createComponent()方法需要的是组件类（比如InfoTooltipComponent本身）或者ComponentFactory实例。传递实例会导致Angular无法创建对应的组件工厂，从而抛出错误。

• 修正步骤

  1. 直接传递组件类
     移除inject获取实例的代码，在tooltip配置中直接传入组件类：

     {
       name: 'feb - 8',
       columnField: 'feb',
       rowField: 'id',
       rowValue: 8,
       icon: '<span class="material-symbols-outlined">info</span>',
       content: InfoTooltipComponent, // 直接传类，不是实例
     }
     

  2. 确保组件可被动态创建

     • 如果你的Angular版本低于9，需要在模块的entryComponents数组中声明该自定义组件：

       @NgModule({
         declarations: [InfoTooltipComponent],
         entryComponents: [InfoTooltipComponent], // Angular 8及以下需要
       })
       export class YourModule {}
       

     • Angular 9+启用了Ivy编译器，entryComponents已不再强制要求，但如果组件是懒加载或未在模板中直接使用，仍需确保其被模块正确声明。

  3. 创建组件的正确代码
     在指令中，直接使用传入的组件类调用createComponent：

     // 假设tooltip.content是组件类
     const componentRef = config.infoTooltipContainer.createComponent(tooltip.content);
     // 如果需要给组件传值，可通过componentRef.instance访问
     componentRef.instance.someProperty = '你的数据';
     

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