Angular 5动态创建组件：ReflectiveInjector弃用后的适配方案求助

嘿，我完全懂你遇到的困扰——Angular 5正式弃用了ReflectiveInjector，但咱们可以用新的静态注入器API轻松替换，继续实现动态创建带输入的组件功能。下面是具体的适配方案：

核心变化说明 #

Angular 5引入了静态注入器（Static Injector），用Injector.create()替代了旧的ReflectiveInjector.resolveAndCreate()，它不仅性能更优，也是后续Angular版本的标准用法。

修改后的完整代码示例 #

import { Component, Input, ViewContainerRef, ViewChild, Injector, ComponentFactoryResolver } from '@angular/core';
import { AComponent, BComponent, CComponent } from './your-components-path'; // 替换成你的组件实际路径

@Component({
  selector: 'dynamic-component-host',
  template: `<ng-template #dynamicComponentContainer></ng-template>`
})
export class DynamicComponentHostComponent {
  @Input() componentType: any; // 传入要创建的目标组件类型（A/B/C Component）
  @Input() inputData: any; // 要传递给动态组件的输入数据

  @ViewChild('dynamicComponentContainer', { read: ViewContainerRef })
  dynamicComponentContainer: ViewContainerRef;

  constructor(private componentFactoryResolver: ComponentFactoryResolver) { }

  ngOnInit() {
    this.createDynamicComponent();
  }

  createDynamicComponent() {
    // 清空容器（可选，避免重复创建组件）
    this.dynamicComponentContainer.clear();

    // 1. 获取目标组件的工厂实例
    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(this.componentType);

    // 2. 创建新的注入器（替代原ReflectiveInjector）
    const injector = Injector.create({
      providers: [
        // 定义需要注入到动态组件的依赖，比如自定义输入数据
        { provide: 'componentInput', useValue: this.inputData }
      ],
      parent: this.dynamicComponentContainer.injector // 继承父容器的注入器，确保能访问全局服务
    });

    // 3. 创建并挂载动态组件到容器中
    const componentRef = this.dynamicComponentContainer.createComponent(componentFactory, 0, injector);
    
    // 另一种传递输入的方式：直接给组件实例的@Input属性赋值（和注入方式二选一即可）
    // componentRef.instance.yourInputProperty = this.inputData;
  }
}

关键修改点 #

• 导入替换：移除ReflectiveInjector，替换为Injector
• 注入器创建：用Injector.create()替代ReflectiveInjector.resolveAndCreate()，参数是配置对象：
  • providers：数组，格式和原写法一致，用于定义需要注入的依赖
  • parent：指定父注入器，保证动态组件能继承应用内的全局服务
• 输入传递：除了注入器传递，还可以直接通过componentRef.instance给动态组件的@Input()属性赋值，两种方式按需选择

注意事项 #

• 确保你要动态创建的组件（A/B/C Component）已经在模块的entryComponents中声明（Angular 9+可省略，但Angular 5必须配置）
• 如果不需要自定义依赖，也可以直接使用父注入器创建组件：this.dynamicComponentContainer.createComponent(componentFactory)

这样修改后，你的动态组件创建功能就能完美适配Angular 5了！

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