Добавить основной текст в диалоговое окно mat

#angular #angular-material

#angular #angular-материал

Вопрос:

Я пытаюсь добавить некоторый основной текст в диалоговое окно mat, но, похоже, не могу передать текст через

   openDialog(): void {
    const dialogRef = this.dialog.open(ConfirmComponent, {
      width: '350px',
      data: "Do you accept these terms and conditions?"
    });
    
    dialogRef.afterClosed().subscribe(result => {
      if(result) {
        console.log('Yes clicked');
      }
    });
  }
  

компонент диалога

 public dialogRef: MatDialogRef<ConfirmComponent>,
@Inject(MAT_DIALOG_DATA) public title: string,
@Inject(MAT_DIALOG_DATA) public message: string,

<h2 mat-dialog-title>{{title}}</h2>
<div mat-dialog-content>
  {{message}}
</div>
<div mat-dialog-actions>
  <button mat-button color="primary" (click)="onNoClick()">No</button>
  <button mat-button color="primary" (click)="onYesClick()">Yes</button>
</div>
  

Итак, я пытаюсь передать заголовок и сообщение в данные в диалоговом окне

Ответ №1:

@Inject(MAT_DIALOG_DATA) Введет ваши данные. Вы не должны использовать его дважды, а только один раз, например:

 @Inject(MAT_DIALOG_DATA) public data: {title: string; message: string}

<h2 mat-dialog-title>{{data.title}}</h2>
<div mat-dialog-content>
  {{data.message}}
</div>
  

И использовать его с MatDialog:

 this.dialog.open(ConfirmComponent, {
      width: '350px',
      data: {
        title: "Confirmation message",
        message: "Do you accept these terms and conditions?",
      },
    });