Угловой материал: возможно ли создавать модалы (или диалоги) с помощью ng-шаблона?

Question

В моем проекте я использую компонент диалога ngx-bootstrap , который берет ваш ng-template и отображает его как ваш модал.

Использование ng-template выгодно по многим причинам и, что более важно, нет коммуникационного барьера (между модальным и исходным компонентом), если ng-template живет в одном и том же компоненте.Таким образом, я могу без проблем вызывать свой компонентный метод.Например, в следующем коде selectNextRow() изменит строку в моей таблице и, следовательно, selectedRow_Session, и, таким образом, данные следующей строки будут отображаться в модальном режиме.

app.component.ts

/** display selectedRow_Session on modal */
<ng-template #sessionDetailTemplate>

      <app-session-detail-model
        [session]="selectedRow_Session"
        [bot]="bot"
        (selectNextRow)="selectNextRow()"
        (closeModel$)="modalRef.hide()"
        (selectPrevRow)="selectPrevRow()"
        [pageNumberOfCurrentRowSelected]="pageNumberOfCurrentRowSelected"
        [indexOfCurrentRowSelected]="indexOfCurrentRowSelected"
        [finalDfState]="selectedRow_Session.df_state"
        [sessionDataStore]="selectedRow_Session.data_store">
      </app-session-detail-model>

</ng-template>

В диалогах Angular Material я мог найти только API, который может создавать модалы только с Component, а не с ng-template.

Есть ли способ сделать это, с диалогами или без них, используя угловой материал?

Answer 1

Как уже упоминалось в комментариях, вы можете использовать TemplateRef с @ angular / material MatDialog.Справочную информацию по API можно найти здесь: Angular Material MatDialog .

Вот минимальный пример, показывающий, как это сделать:

import { Component, ViewChild, TemplateRef } from '@angular/core';
import { MatDialog } from '@angular/material';

@Component({
 selector: 'dialog-overview-example',
 template: `
  <div [style.margin.px]="10">
    <button mat-raised-button (click)="openDialog()">Open Modal via Component Controller</button>
  </div>
  <div [style.margin.px]="10">
    <button mat-raised-button (click)="dialog.open(myTemplate)">Open Modal directly in template</button>
  </div>

<ng-template #myTemplate>
  <div>
    <h1>This is a template</h1>
  </div>
</ng-template>
`
})
export class DialogOverviewExample {
  @ViewChild('myTemplate') customTemplate: TemplateRef<any>;

  constructor(public dialog: MatDialog) {}

  openDialog(): void {
     const dialogRef = this.dialog.open(this.customTemplate, {
        width: '250px'
     });

     dialogRef.afterClosed().subscribe(() => {
       console.log('The dialog was closed');
     });
   }
 }

А вот живой примериспользуя Angular v6: Пример Stackblitz Live .

Надеюсь, это поможет!