angular - 在 Material Angular 中显示一个简单的警告对话框

Question

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

Answer 1

编辑:

您还可以在组件的 HTML 文件(或更常见的称为“组件 View ”)中使用模板引用，然后在组件的 TypeScript 文件中引用它，然后将该引用传递给 MatDialog#open.

或者，您可以在组件 View 中访问模板的引用，然后将其传递给您定义的接受该引用的方法。

如果您对我刚刚输入的内容感到困惑，请查看下面的代码(第一个对话框展示了第一句话，第二个对话框展示了我在第二句中解释的内容)

(再次假设以下结构)

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

app.component.html:

<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.ts(缩写):

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);
  }
}

此方法可以为您省去一些仅为对话框创建新组件以及在模块的 entryComponents 中声明它们的麻​​烦。

但是，如果您在单个组件 View 中有多个对话框模板，这很快就会变得麻烦。

---

原始答案

这是您要求的一个简单示例:

(假设结构如下)

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

my-alert-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: 指示对话框 Action 的指令).
• [matDialogClose]/[mat-dialog-close]:指示此元素的指令(通常用在 button 元素上)单击时应关闭对话框。可选地，此指令可以包含一个参数(任何类型)，然后可以将其传递给打开此对话框的组件。

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