通用动态材质MatDialog

Question

将现有和新创建的组件加载到Dialog

我尝试了许多我知道的方法，最后，我遵循了 answer。

它工作正常，但必须在此处通过组件引用

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent  {
   constructor(public dialog: MatDialog) {}

  openDialog(): void {
    let dialogRef = this.dialog.open(DialogDialog, {
      width: '250px',
      data: { component: DynamicComponent } // here
    });
  }

}


@Component({
  selector: 'dynamic-comp',
  template: `
  <div>Dynamic component</div>`
})
export class DynamicComponent {

}

现在我创建此服务

export class OpenModalService {
   dialogconfig = new MatDialogConfig();

  constructor(
    private layoutSvc: LayoutService,
    private dialog: MatDialog) {
      // this.dialogconfig.disableClose =true;
      this.dialogconfig.autoFocus = true;
      this.dialogconfig.width = '60%';
    }
    }
    openModal(modal){
    
      if (modal !== undefined) {
        switch (modal) {
          case 'Component1':
            this.opendialogforcomponent1();
            break;
            ...}}

但是我知道有更好的方法来创建采用组件名称的服务，并返回组件引用以在对话框上打开它，而无需创建这样的静态映射

let mapping = [
    {'name':'name1', 'component':Component1},
    {'name':'name2', 'component':Component2},
    {'name':'name3', 'component':Component3},
];

因为我不想每次添加新组件时都在服务上进行修改。