在模版弹出对话框中，仅显示来自templateurl html文件的角度的一个div

Question

我的模板网址中有2个div，从ts文件中，我只需要调用特定的div，但是当我输入dialog.open时，两个div都将显示在弹出对话框中。

[加载页面时，我只希望加载一个div。

当我单击openDialog时，应显示B Div但是两个div都被显示。

passHist.component.html

第一分区

<div id="A">
  <li>
    <button mat-raised-button (click)="openDialog()">Password History</button>
  </li>
</div>

第二分区

<div id="B">
  <div>
    <h1 mat-dialog-title>Password History</h1>
  </div>
  some content inside
</div>

TS文件

passHist.component.ts

openDialog(ispassButton, ispassContent): void {
    const dialogRef = this.dialog.open(PassHistComponent, {
      width: "1000px"
    });
  }

@Component({
  selector: 'app-modal',
  templateUrl: '.passHist.component.html',
  styleUrls: ['.passHist.component.css']
})

请提供帮助并提供建议，以实现此目的谢谢

A和B div都在弹出对话框中显示但应仅在B div内显示。

Answer 1

在对话框中打开PassHistComponent时，可以在data中提供自定义MatDialogConfig。根据data，您可以显示或隐藏div。

在您的特定情况下，data类型可能如下所示：

interface DialogData {
    showA: boolean;
    showB: boolean;
}

您的组件必须接受data属性。

constructor(public dialogRef: MatDialogRef<PassHistComponent>, 
    @Inject(MAT_DIALOG_DATA) public data: DialogData ) {        
}

该对话框可以如下打开：

openDialog(ispassButton, ispassContent ): void {
    const dialogData: DialogData = { showA: false; showB: true };
    const dialogRef = this.dialog.open(PassHistComponent, 
        { data: dialogData,  width: '1000px' });
    ...
}    

在您的模板中。

<div id="A" [hidden]="!data.showA">
   ...
</div> 

有关更多说明，请阅读Sharing data with the Dialog component