Display a simple alert dialog in Material Angular

问题

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?

回答1:

EDIT:

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)

(Assuming the following structure once again)

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 (shortened):

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

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.

---

Original answer

Here's a simple example as you requested:

(Assuming the following structure)

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>

Explanation of the above code:

• [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 (redacted)

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 (redacted)

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

来源：https://stackoverflow.com/questions/49472031/display-a-simple-alert-dialog-in-material-angular