Angular中给动态加载的组件传递@Input属性出现类型报错如何解决

你遇到的编译报错是TypeScript静态类型检查的正常提示：动态加载组件时，编译器无法提前推断动态组件实例的具体类型，默认将dynamicComponent.instance标记为unknown类型，因此访问自定义的data1等属性时就会触发类型校验报错。
另外你提供的代码存在笔误：调用resolveComponentFactory生成的工厂变量名为componentFactory，但传给vcRef.createComponent时错误写为paymentGatewayFactory，需要先修正这个错误。

方案1：定义公共接口约束（最推荐，保留类型校验能力） #

这个方案可以从根源解决类型问题，同时保留TypeScript的类型校验能力，避免后续属性传错。

1. 首先定义所有动态组件统一实现的公共输入接口：

// 可根据实际业务替换属性的具体类型，不推荐直接用any
export interface DynamicComponentInputs {
  data1: any;
  data2: any;
  data3: any;
}

2. 给你的静态组件映射表增加类型约束：

import { Type } from '@angular/core';

// ...
static map: Record<string, Type<DynamicComponentInputs>> = {
  'COMP1': Component1,
  // 其他动态组件，只要组件包含接口定义的三个属性即可，无需显式implements该接口
}

3. 动态创建组件时指定泛型类型：

ngOnInit(): void {
  const componentFactory = this.resolver.resolveComponentFactory<DynamicComponentInputs>(
    DynamicContainerComponent.map[this.dynamicComponentName]
  );
  const dynamicComponent = this.vcRef.createComponent(componentFactory);
  // 此时instance类型已被推断为DynamicComponentInputs，不会触发报错
  dynamicComponent.instance.data1 = this.data1;
  dynamicComponent.instance.data2 = this.data2;
  dynamicComponent.instance.data3 = this.data3;
}

方案2：临时类型断言（适合快速修复，无类型校验） #

如果不需要严格的类型校验，可以直接将组件实例断言为any跳过检查：

// 方式1：单次断言
(dynamicComponent.instance as any).data1 = this.data1;
(dynamicComponent.instance as any).data2 = this.data2;
(dynamicComponent.instance as any).data3 = this.data3;

// 方式2：统一断言后赋值
const instance = dynamicComponent.instance as {data1:any, data2:any, data3:any};
instance.data1 = this.data1;
instance.data2 = this.data2;
instance.data3 = this.data3;

方案3：Angular 14+简化写法 #

如果你使用Angular 14及以上版本，不需要再注入ComponentFactoryResolver，可以直接传入组件类创建动态组件，类型处理更简单：

// 不需要在constructor中注入ComponentFactoryResolver
ngOnInit(): void {
  const componentClass = DynamicContainerComponent.map[this.dynamicComponentName];
  const dynamicComponent = this.vcRef.createComponent<DynamicComponentInputs>(componentClass);
  dynamicComponent.instance.data1 = this.data1;
  dynamicComponent.instance.data2 = this.data2;
  dynamicComponent.instance.data3 = this.data3;
}

• 如果你使用Angular 9之前的版本，需要将所有动态组件添加到对应NgModule的entryComponents数组中，Angular 9+开启Ivy编译后无需手动配置。
• 所有动态组件必须确实包含data1、data2、data3三个@Input属性，否则运行时会出现赋值无效的问题。

内容的提问来源于stack exchange，提问作者kt-workflow