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

问题描述

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

I'm using Material Angular (from Angular Material). The examples in the site seem a Little too overcomplicated and every other tutorial in the internet seems either outdated or to be using AngularJS instead. How can I show a simple alert (just like Android's AlertDialog) with a title, a message and a confirm/cancel button?

推荐答案

编辑:

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

You could also use a template reference in your component's HTML file (or more commonly known as a "component view") and then reference it in your component's TypeScript file and then pass that reference to MatDialog#open.

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

Alternatively, you can access a reference of the template in your component's view and then pass it to a method you defined that accepts the reference.

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

If you're confused with what I just typed out, check out the code below (the first dialog demonstrates the first sentence and the second dialog showcases what I explained in the second sentence)

(再次假设以下结构)

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 中声明它们的麻​​烦.

This method can save you some hassle in creating new components just for dialogs, as well as declaring them in your module's entryComponents.

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

However, this can quickly become troublesome if you have multiple dialog templates in a single component view.

原答案

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

Here's a simple example as you requested:

(假设结构如下)

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

• [matDialogTitle] / [mat-dialog-title]: A directive (typically used on a h2 element) for indicating the dialog's title.
• [matDialogContent] / [mat-dialog-content] / mat-dialog-content: A directive indicating the dialog's content.
• [matDialogActions] / [mat-dialog-actions] / mat-dialog-actions: A directive indicating the dialog's action(s).
• [matDialogClose] / [mat-dialog-close]: A directive (typically used on a button element) indicating that this element when clicked on should close the dialog. Optionally, this directive can include a parameter (of any type) which can be then passed to the component who opened this dialog.

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

演示

这篇关于在 Material Angular 中显示一个简单的警报对话框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！