在“材料角度"中显示一个简单的警报对话框 [英] Display a simple alert dialog in 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 { }

---

演示

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