Question

在我的项目中，我正在使用ngx-bootstrap's dialog组件，该组件接收您的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对话框中，我只能找到可以仅使用Component而不使用ng-template创建模态的API。

有没有一种方法可以使用Angular Material进行对话框（有或没有对话框）？

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 Example。

希望有帮助！

角材料：是否可以使用ng-template创建模态（或对话框）？

1 个答案: