Question

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

我通过为每个列元素创建不同的组件以及在表组件中使用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

您可以拥有一个组件并将数据传递到其中

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

Answer 2

这可以用来满足您的要求

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

常用对话框组件诠释

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

尝试这样：

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

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

3 个答案: