没有组件的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(dialog: MatDialog) {}

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

Here 也是如何做同样事情的一个例子。

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