Может ли Angular 6 и Material отображать в диалоговом окне не весь компонент, а только его часть?

Question

У меня есть компонент и табличное представление. Этот же компонент имеет форму для добавления новой записи. Я хотел бы отобразить эту форму в диалоговом окне, но не помещать ее в отдельный компонент. Это возможно?

Answer 1

Если я правильно понял вопрос, это возможно. Используйте ng-шаблон в своем компоненте HTML, который содержит то, что вы хотите показать в диалоговом окне.

<ng-template #dialogTemplate>
    <h1 mat-dialog-title>Title</h1>
    <mat-dialog-content>
      Formgroup for adding item goes here
    </mat-dialog-content>
    <mat-dialog-actions>
      <button mat-button [matDialogClose]='true' mat-icon-button><mat-icon>check</mat-icon></button>
      <button mat-button [matDialogClose]='false' mat-icon-button><mat-icon>cancel</mat-icon></button>
    </mat-dialog-actions>
</ng-template>

Затем создайте ViewChild в вашем ts-файле

  @ViewChild('dialogTemplate') dialogTemplate: TemplateRef<any>;
  constructor(private dialog: MatDialog) { }

Затем вы открываете диалоговое окно, вызывая функцию с вашей кнопки и т. Д.

  open() {
    const dialogRef = this.dialog.open(this.dialogTemplate);

    dialogRef.afterClosed().subscribe(answer => {
      if (answer === true) {
         // logic to save your item goes here
      }
    });

  }