向组件传额外数据时ComponentFactoryResolver已弃用，如何重构？

Angular 14+ 已弃用ComponentFactoryResolver，ViewContainerRef.createComponent现在支持直接传入组件类，无需提前解析工厂。以下是适配你的需求、可直接使用的重构代码：

完整重构代码 #

import { Component, Input, OnInit, ViewChild, ViewContainerRef } from '@angular/core';
import { ModalController } from '@ionic/angular'; // 按实际项目框架调整导入路径

// 保留你的类型定义
interface GenericData {
  data?: any;
  modalCtrl?: ModalController;
}

@Component({
  selector: 'app-generic-modal',
  templateUrl: './generic-modal.component.html',
  styleUrls: ['./generic-modal.component.scss']
})
export class GenericModalComponent implements OnInit {
  @Input() childComponent: { component: any; data: any };
  @ViewChild('componentHost', { read: ViewContainerRef, static: true }) componentHost!: ViewContainerRef;

  constructor(private modalCtrl: ModalController) { } // 移除ComponentFactoryResolver注入

  ngOnInit() {
    this.loadComponent();
  }

  dismiss(data = null) {
    this.modalCtrl.dismiss(data);
  }

  loadComponent() {
    this.componentHost.clear();

    // 方式1：直接操作组件实例赋值（兼容原有逻辑，快速迁移）
    const componentRef = this.componentHost.createComponent(this.childComponent.component);
    const instance = componentRef.instance as GenericData;
    instance.data = this.childComponent.data;
    instance.modalCtrl = this.modalCtrl;

    // 方式2：通过createComponent的inputs配置传递（更符合Angular输入属性规范，推荐长期使用）
    // 前提：子组件的data、modalCtrl是通过@Input()声明的输入属性
    // const componentRef = this.componentHost.createComponent(this.childComponent.component, {
    //   inputs: {
    //     data: this.childComponent.data,
    //     modalCtrl: this.modalCtrl
    //   }
    // });
  }
}

关键改动说明 #

• 移除冗余依赖：删掉ComponentFactoryResolver的注入和相关解析逻辑，createComponent现在可直接接收组件类作为参数，内部自动处理工厂创建。
• 两种属性传递方式：
  • 方式1和原有代码逻辑对齐，直接给组件实例赋值，适合快速完成迁移。
  • 方式2使用createComponent的inputs配置项，更贴合Angular的输入属性设计规范，能获得更好的类型校验支持。
• 类型安全保障：通过GenericData接口断言组件实例类型，避免类型报错。

额外建议 #

如果ModalController是Angular服务，更推荐在子组件中直接注入该服务，而非通过实例赋值传递——这更符合Angular依赖注入的设计理念，也能避免潜在的上下文绑定问题。

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