显示带有通用组件的 Mat 对话框

Question

我已经编写了一个逻辑来在对表格元素进行点击操作时打开 mat-dialog。如果单击不同的列值，则对话框中应显示不同的内容。基本上我想为对话框创建一个组件（只有一个），现在必须使用相同的组件来显示不同的内容

我通过为每个列元素创建不同的组件并在表格组件中使用 ng-template 来实现输出，这样就无法创建任何组件。

表格的HTML代码

<div(click)="onClick(topCol,data[topCol]);">{{data[topCol]}}</div>

表格的TS文件

onClick(columnheader: string, columnvalue: any) {
    if (this.alertValues.indexOf(columnheader) >= 0) 
    {
      this.dialogService.openConfirmDialog(columnheader);
    }
  }

调用服务打开特定组件

openConfirmDialog(msg) {
   if(msg=="totalSuccessful") 
    {
      this.dialog.open(TotalSuccessfulComponent,
        {
          width: '300px',
          height: '200px',
          data:{
            message:msg
          }
        });
    }
    else if(msg=="totalBussinessSkip") 
    {
      this.dialog.open(TotalBussinessSkipComponent,
        {
          width: '300px',
          height: '200px',
          data:{
            message:msg
          }
        });
    }
    else if(msg=="totalTechnicalSkip") 
    {
      this.dialog.open(TotalTechnicalSkipComponent,
        {
          width: '300px',
          height: '200px',
          data:{
            message:msg
          }
        });
    } 

但我想要具有相同组件的不同对话框内容

Answer 1

试试这样：

import { ComponentType } from '@angular/cdk/portal';


openConfirmDialog(msg) {
  let dialog: ComponentType<any> = this.getComponent(msg);
  /* or
   let dialog: ComponentType<TotalSuccessfulComponent|TotalBussinessSkipComponent|TotalTechnicalSkipComponent > = this.getComponent(msg);
  */
   this.dialog.open(dialog,
    {
      width: '300px',
      height: '200px',
      data:{
        message:msg
      }
    });
}

getComponent(msg: string) {
  switch(msg) {
   case 'totalSuccessful': return TotalSuccessfulComponent;
   case 'totalBussinessSkip': return TotalBussinessSkipComponent;
   case 'totalTechnicalSkip': return TotalTechnicalSkipComponent;
  }
}

Answer 2

这可以用来满足你的要求

openConfirmDialog(msg) {
  this.dialog.open(CommonDialogComponent,
        {
          width: '300px',
          height: '200px',
          data:{
            message:msg
          }
        });
}

常用对话框组件 整数 ts

constructor(@Inject(MAT_DIALOG_DATA) public data: matDialogData) {}

someAction(){
  if(this.matDialogData.message==='something'){
 perform that respective operation.
 }
 }

在 HTML 中

<div *ngIf="matDialogData.message==='something'">
 show respective data / component etc... 
</div>

希望对你有帮助！

Answer 3

您可以拥有一个组件并将数据传递给它

@Component({
  selector: 'generic-dialog',
  templateUrl: 'dialog-data-example-dialog.html',
})
export class GenericDialog {
  constructor(@Inject(MAT_DIALOG_DATA) public data: DialogData) {
      // data is your {message:msg } you are passing from service
  }
}

所以现在在你的服务内部你不需要打开不同的组件

this.dialog.open(GenericDialog ,
        {
          width: '300px',
          height: '200px',
          data:{
            message:msg
          }
        });