无组件的 Angular 对话框

Question

Angular 8 有没有一种方法可以生成一个小对话框而无需创建新组件？一些小消息，例如“操作已完成”，不需要与用户进行太多交互。我只是觉得在一个项目中再添加 4 个文件只是为了显示成功消息就太多了：

small-dialog.component.html
small-dialog.component.scss
small-dialog.component.spec.ts
small-dialog.component.ts

或者也许有一种方法可以在几行中创建一个“默认组件”，而不必实际生成一个新组件？

Answer 1

如果你不想为对话框本身创建组件，你可以这样做：

查看.html

<button (click)="openDialog(template)">Open my dialog</button>
<ng-template #template>
 <h1>This is a message</h1>
</ng-template>

组件.ts

import {MatDialog, MatDialogRef} from '@angular/material/dialog';

 
constructor(public dialog: MatDialog) {}

openDialog(templateRef) {
  let dialogRef = this.dialog.open(templateRef, {
   width: '300px'
 });
}

这里 这也是你如何做同样的事情的一个例子。

但我建议您创建可以在整个应用程序中使用的通用对话框组件，如何开始使用，您可以在here看到它。

更新： 如何创建没有 Material 组件的对话框可以参见here。