Javascript 显示带有公共组件的Mat对话框

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

我通过为每个列元素创建不同的组件以及在表组件中使用ng模板来实现输出，这样就不能创建任何组件

表格的HTML代码

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

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
          }
        });
    } 

---

但是我希望同一个组件具有不同的对话框内容

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

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
          }
        });
    } 

@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
          }
        });

---

这可以用来满足您的要求

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

通用对话框组件 int ts

在HTML中

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

显示相应的数据/组件等。。。

希望有帮助

像这样试试：

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;
  }
}

从'@angular/cdk/portal'导入{ComponentType}；
openConfirmDialog（msg）{
let对话框：ComponentType=this.getComponent（msg）；
/*或
let对话框：ComponentType=this.getComponent（msg）；
*/
此.dialog.open（对话框，
{
宽度：“300px”，
高度：“200px”，
数据：{
信息：msg
}
});
}
getComponent（消息：字符串）{
开关（msg）{
案例“totalSuccessful”：返回TotalSuccessfulComponent；
案例“TotalBusinessSkip”：返回TotalBusinessSkipComponent；
案例“totalTechnicalSkip”：返回TotalTechnicalSkipComponent；
}
}

msg只包含一个文本。我的要求类似于在该对话框中显示任何内容。例如：tables piecharts等…@BhanuPrakashWar那么你需要有单独的对话框，当然你可以用一个，但它会变得混乱