Angular非弃用方式动态创建组件：通过组件名字符串实例化

要实现通过组件名称字符串动态创建组件，核心是先建立组件名称与组件类的映射关系，再结合ViewContainerRef.createComponent（Angular 14+非弃用API）实现参数化创建。具体步骤如下：

1. 定义组件类型映射表 #

由于TypeScript无法直接通过字符串获取组件类的引用（避免使用不安全的eval），需要手动维护一个映射对象，将组件名称字符串对应到实际的组件类：

import { Type } from '@angular/core';
import { PersonComponent } from './person.component';
import { AddressComponent } from './address.component';
import { CompanyComponent } from './company.component';

// 组件名称 -> 组件类的映射表
const componentMap: Record<string, Type<any>> = {
  PersonComponent: PersonComponent,
  AddressComponent: AddressComponent,
  CompanyComponent: CompanyComponent
};

2. 参数化动态创建组件 #

在已注入ViewContainerRef的组件中，通过传入的组件名称字符串从映射表中获取组件类型，再调用createComponent完成创建：

import { Component, OnInit, ViewContainerRef } from '@angular/core';

@Component({
  selector: 'app-dynamic-host',
  template: ''
})
export class DynamicHostComponent implements OnInit {
  constructor(private viewContainerRef: ViewContainerRef) { }

  ngOnInit(): void {
    // 示例：从外部获取的目标组件名称字符串
    const targetComponentName = 'PersonComponent';
    // 从映射表匹配对应的组件类型
    const componentType = componentMap[targetComponentName];

    if (componentType) {
      // 动态创建组件
      const componentRef = this.viewContainerRef.createComponent(componentType);
      // 可选：给组件实例传递数据
      // componentRef.instance.someProperty = '示例值';
    } else {
      console.error(`未找到名为 ${targetComponentName} 的组件，请检查映射表配置`);
    }
  }
}

注意事项 #

• 确保所有需要动态创建的组件已在对应NgModule的declarations数组中声明（NgModule模式）；若使用独立组件，需保证组件访问权限正确。
• ViewContainerRef.createComponent是Angular 14及以上版本的非弃用API，替代了旧版的resolveComponentFactory方法，完全符合你的需求。
• 若需懒加载组件，可将映射表中的值改为懒加载函数（如() => import('./person.component').then(m => m.PersonComponent)），再结合异步调用逻辑处理。

内容的提问来源于stack exchange，提问作者L. Kvri