有角度的材料:有可能用ng模板创建模态(或对话框)吗

Question

在我的项目中，我使用ngx-bootstrap的对话框组件，该组件接受ng-template并将其显示为模态。

由于许多原因，使用ng-template是有利的，最重要的是，如果ng-template生活在同一个组件中，则(模态组件和原始组件之间(不存在通信障碍。通过这种方式，我可以毫无问题地调用我的组件方法。例如，在下面的代码中，selectNextRow()将更改我表中的行，因此selectedRow_Session和下一行的数据将显示在模态上。

应用程序组件.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>

在"角度材质"对话框中，我只能找到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:Stacklitz live example的实际示例。

希望它能有所帮助！