отображать только один div в модальном всплывающем диалоговом окне в угловом формате из файла templateurl html - PullRequest
Новая
       68

отображать только один div в модальном всплывающем диалоговом окне в угловом формате из файла templateurl html

0 голосов
/ 04 ноября 2019

У меня есть 2 div в URL-адресе шаблона, и из файла ts мне нужно вызвать только определенный div, но когда я даю dialog.open, оба div отображаются в диалоговом окне.

Когда страницазагружен, я хочу, чтобы загружался только div.

Когда я нажимаю openDialog, должен отображаться B Div, но оба div отображаются на экране.

passHist.component.html

Первый div 

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

Второй 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.

1 Ответ

0 голосов
/ 04 ноября 2019

При открытии 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>

Для получения дополнительных объяснений, пожалуйста, прочитайте Обмен даннымис компонентом Диалог

...