如何将@Input字符串转为MatDialog可用的ComponentType|TemplateRef

作为Angular新手，你提出的这个问题其实触碰到了Angular动态组件引用的核心逻辑——组件编译后是JavaScript类，字符串本身无法直接关联到对应的类实例，所以我们需要建立一个「名称到组件类」的映射关系来实现转换。下面是一步步的实现方案，简单直观，非常适合新手理解和实践：

步骤1：创建组件名称映射表 #

首先，我们需要把所有可能用来弹窗的组件，提前注册到一个映射对象里。这样当传入字符串名称时，就能快速找到对应的组件类。

// 可以新建一个component-map.ts文件，或者直接写在你的包装服务里
import { ModalFormComponent } from './forms/modal-form.component';
// 如果你有其他弹窗组件，也在这里导入
import { ConfirmModalComponent } from './modals/confirm-modal.component';

// 建立字符串名称 → 组件类的映射
export const ComponentMap = {
  'ModalFormComponent': ModalFormComponent,
  'ConfirmModalComponent': ConfirmModalComponent
};

步骤2：升级你的MatDialog包装服务 #

修改包装服务，让它支持同时接收组件类和字符串名称两种参数，内部通过映射表完成转换：

import {Injectable} from '@angular/core';
import {MatDialog, ComponentType} from '@angular/material/dialog';
import { ComponentMap } from './component-map'; // 导入刚才的映射表

@Injectable({ providedIn: 'root' })
export class MatDialogWrapperService {
  constructor(private dialog: MatDialog) { }

  // 重载open方法：兼容组件类和字符串名称
  open(component: ComponentType<any> | string, config = {}) {
    let targetComponent: ComponentType<any>;

    if (typeof component === 'string') {
      // 从映射表中获取对应的组件类
      targetComponent = ComponentMap[component];
      // 做个错误处理，避免传入不存在的组件名
      if (!targetComponent) {
        throw new Error(`找不到名为 "${component}" 的组件，请检查ComponentMap是否已添加该组件`);
      }
    } else {
      // 如果传入的是组件类，直接使用
      targetComponent = component;
    }

    return this.dialog.open(targetComponent, config);
  }
}

步骤3：在组件中使用@Input传入字符串名称 #

现在你可以通过@Input接收父组件传来的组件名字符串，直接传给包装服务的open方法：

import { Component, Input } from '@angular/core';
import { MatDialogWrapperService } from './mat-dialog-wrapper.service';

@Component({
  selector: 'app-intro-form',
  templateUrl: './intro-form.component.html',
  styleUrls: ['./intro-form.component.scss']
})
export class IntroFormComponent {
  // 接收父组件传入的组件名字符串
  @Input() modalComponent!: string;

  constructor(private modalService: MatDialogWrapperService ) {}

  modalCall() {
    // 直接传入字符串即可，服务内部会完成转换
    this.modalService.open(this.modalComponent, { width: '500px' });
  }
}

对应的HTML使用方式：

<app-intro-form [modalComponent]="'ModalFormComponent'"></app-intro-form>

关键注意事项 #

• Angular版本兼容：如果你的Angular版本在9以下（非Ivy编译器），需要在模块的entryComponents数组中添加所有弹窗组件，否则Angular不会提前编译这些动态组件。比如：

  @NgModule({
    declarations: [ModalFormComponent, ConfirmModalComponent],
    entryComponents: [ModalFormComponent, ConfirmModalComponent] // 老版本需要加这个
  })
  export class YourModule { }
  

• 映射表维护：每次新增弹窗组件时，记得同步更新ComponentMap，不然会抛出找不到组件的错误。
• 进阶思路：如果你的项目需要大量动态组件，可以考虑用ComponentFactoryResolver结合模块的组件集合来自动注册，但对于新手来说，手动维护映射表的方式更直观、容易调试。

这个方案是Angular中处理动态组件调用的常用方式，非常适合你现阶段学习动态组件的核心逻辑~

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