在Material Angular中显示简单的警报对话框

(假设以下结构)

app/
  my-alert-dialog/
    my-alert-dialog.component.html
    my-alert-dialog.component.ts
  app.component.ts
  app.module.ts

我的警觉,dialog.component.html

<h2 matDialogTitle>Unregister?</h2>
<mat-dialog-content>
  <p>When you unregister,all your data will be removed. Continue?</p>
</mat-dialog-content>
<mat-dialog-actions align="end">
  <!--
    Note that you can pass in anything to the `matDialogClose` attribute. This also includes objects,arrays,etc.
    Just make sure that you make it a property binding with those [] brackets
    Example: <button mat-button [matDialogClose]="{'lol': true}">Cancel</button>
  -->
  <button mat-button matDialogClose="cancel" color="primary">Cancel</button>
  <button mat-button matDialogClose="confirm" color="warn">Unregister</button>
</mat-dialog-actions>

上述代码的说明：

> [matDialogTitle] / [mat-dialog-title]：指示对话框标题的指令(通常用于h2元素).
> [matDialogContent] / [mat-dialog-content] / mat-dialog-content：指示对话框内容的指令.
> [matDialogActions] / [mat-dialog-actions] / mat-dialog-actions：指示对话框操作的指令.
> [matDialogClose] / [mat-dialog-close]：指示单击此元素时应关闭对话框的指令(通常用于按钮元素).可选地,该指令可以包括一个参数(任何类型),然后可以将该参数传递给打开该对话框的组件.

我的警觉,dialog.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-alert-dialog',// Replace with your own selector
  templateUrl: './my-alert-dialog.component.html'
})
export class MyAlertDialogComponent { }

app.component.ts(编辑)

import { MatDialog } from '@angular/material';
import { MyAlertDialogComponent } from './my-alert-dialog/my-alert-dialog.component';
// ...
export class AppComponent {
  constructor(private dialog: MatDialog) { }
  unregister() {
    let dialogRef = this.dialog.open(MyAlertDialogComponent);
    dialogRef.afterClosed().subscribe(result => {
      // NOTE: The result can also be nothing if the user presses the `esc` key or clicks outside the dialog
      if (result == 'confirm') {
        console.log('Unregistered');
      }
    })
  }
}

app.module.ts(编辑)

import { MatDialogModule } from '@angular/material';
import { MyAlertDialogComponent } from './my-alert-dialog/my-alert-dialog.component';

@NgModule({
  declarations: [
    // ...
    MyAlertDialogComponent
  ],imports: [
    // ...
    MatDialogModule
  ],entryComponents: [
    // See https://material.angular.io/components/dialog/overview#configuring-dialog-content-via-code-entrycomponents-code- for more info
    MyAlertDialogComponent
  ]
})
export class AppModule { }

Demo