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

Question

我正在使用Material Angular(来自Angular Material).该网站中的示例似乎有点过于复杂,互联网上的其他所有教程似乎都已过时或者正在使用AngularJS.如何使用标题,消息和确认/取消按钮显示简单警报(就像Android的AlertDialog一样)？

Answer 1

以下是您要求的简单示例:

(假设以下结构)

app/
  app.component.html
  app.component.ts

MatDialog#open

<button mat-button (click)="openDialogWithRef(firstDialog)">Open dialog with reference</button>
<button mat-button (click)="openOtherDialog()">Open dialog in code</button>

<ng-template #firstDialog>
  <h2 matDialogTitle>Hello, world!</h2>
  <p matDialogContent><em>Content for this dialog goes here...</em></p>
  <mat-dialog-actions align="end">
    <button mat-button matDialogClose>Dismiss</button>
  </mat-dialog-actions>
</ng-template>

<ng-template #secondDialog>
  <h2 matDialogTitle>Hello, second dialog!</h2>
  <p matDialogContent>Interesting note: This template reference was referenced in code with the <code>@ViewChild</code>, which lets you query components/template references in the component view.</p>
  <mat-dialog-actions align="end">
    <button mat-button matDialogClose>Dismiss</button>
  </mat-dialog-actions>

上述代码的说明:

• app.component.html/ app.component.ts:entryComponents用于指示对话框标题的指令(通常用于元素).
• my-alert-dialog.component.html/ [matDialogTitle]/ [mat-dialog-title]:一个指令指示对话框的内容.
• h2/ [matDialogContent]/ [mat-dialog-content]:一个指令指示对话框的动作(一个或多个).
• mat-dialog-content/ [matDialogActions]:一个指令(通常在[mat-dialog-actions]元素上使用),指示单击此元素时应该关闭对话框.可选地,该指令可以包括参数(mat-dialog-actions类型),然后可以将该参数传递给打开该对话框的组件.

[matDialogClose]

import { ViewChild, TemplateRef } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';

// ...
export class AppComponent {
  @ViewChild('secondDialog') secondDialog: TemplateRef<any>;

  constructor(private dialog: MatDialog) { }

  openDialogWithRef(ref: TemplateRef<any>) {
    this.dialog.open(ref);
  }

  openOtherDialog() {
    this.dialog.open(this.secondDialog);
  }
}

[mat-dialog-close] (删节)

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

button (删节)

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

演示

Answer 2

我用过一个甜蜜的警报。 https://www.freakyjolly.com/angular-sweetalert2-tutorial/#.X2nNxmgzZPY

\n

它是在 Angular 中创建警报的最简单、最快速的方法。

\n

$ npm install --save sweetalert2\n

\n

import Swal from \'sweetalert2\';在您的 TS 文件中与警报一起使用Swal.fire(\'This is a simple and sweet alert\')

\n