Angular 15+中使用createComponent()动态渲染带自定义@Input()和@Output()组件的实现方案咨询

嘿，这个需求在CMS系统、动态表单 builder 里确实是高频场景，我来给你一步步拆解怎么优雅实现吧！

1. 动态绑定任意@Input()和@Output()属性的实现方法 #

Angular 14+ 提供了 setInput() 方法，比直接给 componentRef.instance 赋值更安全（能触发正确的变更检测，还支持后续的信号输入），结合遍历配置就能轻松绑定任意输入输出：

核心实现代码 #

loadComponent(config: any) {
  // 先清理旧组件和订阅（后面会讲这个逻辑）
  this.cleanupCurrentComponent();

  // 创建组件实例
  const componentRef = this.container.createComponent(config.component);

  // 绑定动态输入
  if (config.inputs) {
    Object.entries(config.inputs).forEach(([inputKey, inputValue]) => {
      // 用setInput替代直接赋值，更符合Angular的组件生命周期规范
      componentRef.setInput(inputKey, inputValue);
    });
  }

  // 绑定动态输出
  if (config.outputs) {
    Object.entries(config.outputs).forEach(([outputKey, callback]) => {
      // 获取组件实例上的EventEmitter
      const outputEmitter = componentRef.instance[outputKey] as EventEmitter<any>;
      // 订阅事件并保存订阅对象，方便后续清理
      const subscription = outputEmitter.subscribe(callback);
      this.componentSubscriptions.push(subscription);
    });
  }
}

2. 类型安全的通用处理方案 #

如果想避免拼写错误、获得IDE的类型提示，可以定义一个泛型配置接口，让组件配置和对应组件的输入输出强绑定：

定义泛型类型 #

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

// 提取组件的所有Output属性（只保留EventEmitter类型的属性）
type ComponentOutputs<T> = {
  [Key in keyof T as T[Key] extends EventEmitter<infer U> ? Key : never]: (value: U) => void;
};

// 通用组件配置类型
interface ComponentConfig<T> {
  component: Type<T>;
  inputs?: Partial<T>; // 输入是组件@Input()的子集
  outputs?: Partial<ComponentOutputs<T>>; // 输出是组件@Output()的回调映射
}

使用类型安全的配置 #

现在你写组件配置的时候，IDE会自动提示对应组件的输入输出，比如：

componentConfigs: ComponentConfig<any>[] = [
  {
    component: ButtonComponent,
    inputs: { label: 'Click Me' }, // 这里如果写错成`lable`，IDE会直接报错
    outputs: { clicked: () => alert('Button clicked') }, // 只有ButtonComponent的@Output()才会被提示
  },
  {
    component: CardComponent,
    inputs: { title: 'Card Title', content: 'Lorem ipsum' },
    outputs: { selected: (data) => console.log(data) },
  },
];

这样就能避免因为输入输出名称拼写错误导致的bug，同时保持代码的灵活性。

3. 清理@Output()订阅的最佳实践 #

动态订阅的事件如果不清理，会导致内存泄漏，推荐两种方案：

方案一：手动管理订阅数组 #

维护一个数组保存所有订阅，在替换组件或宿主组件销毁时统一取消订阅：

private componentSubscriptions: Subscription[] = [];

cleanupCurrentComponent() {
  // 清空容器，销毁旧组件实例
  this.container.clear();
  // 取消所有订阅
  this.componentSubscriptions.forEach(sub => sub.unsubscribe());
  this.componentSubscriptions = [];
}

// 在宿主组件销毁时调用
ngOnDestroy() {
  this.cleanupCurrentComponent();
}

方案二：使用takeUntil操作符（更优雅） #

创建一个destroy$ Subject，所有订阅都通过takeUntil绑定，在组件销毁时发出信号自动取消所有订阅：

import { Subject, takeUntil } from 'rxjs';

private destroy$ = new Subject<void>();

// 绑定输出时改为：
const subscription = outputEmitter.pipe(takeUntil(this.destroy$)).subscribe(callback);

// 宿主组件销毁时：
ngOnDestroy() {
  this.container.clear();
  this.destroy$.next();
  this.destroy$.complete();
}

这种方式不用手动维护订阅数组，代码更简洁，也不容易遗漏订阅清理。

额外注意点 #

调用container.clear()时，Angular会自动销毁旧的组件实例，但外部创建的订阅不会被自动清理，所以必须手动处理订阅的取消。

内容来源于stack exchange