带有角度材质的对话框

我们使用 Angular Material 讨论了许多 可用组件 ，但对话框被省略了，因为它们比大多数其他 Angular Material 组件更涉及设置。 所以对话框有自己的帖子！

我们将实现一个简单的对话框，允许您选择表情符号。 然后调用对话框的组件将取回用户的选择：

首先，您需要确保为您的项目正确设置了 Angular Material setup。 在这里，我们还假设您有一个使用 Angular CLI 启动的项目。

对话框的组件

使用 Angular Material，你的对话框是独立的组件，所以第一步是为你的对话框创建一个组件。 使用 Angular CLI，您可以执行以下操作：

$ ng g component choose-emoji-dialog

导入对话框组件

然后，您需要在您的应用程序模块和将调用对话框的组件中导入对话框组件。 在应用程序模块中，您还将将该组件添加到 declarations 和 entryComponents 中：

应用模块：app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { MaterialModule } from '@angular/material';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { AppComponent } from './app.component';
import { ChooseEmojiDialogComponent } from './choose-emoji-dialog/choose-emoji-dialog.component';

导入和注入 MdDialog

在我们的主应用程序组件中，将调用对话框的组件，让我们也导入 MdDialog 并将其注入到类构造函数中：

app.component.ts

import { Component } from '@angular/core';
import { ChooseEmojiDialogComponent }
  from './choose-emoji-dialog/choose-emoji-dialog.component';
import { MdDialog } from '@angular/material';

@Component({
  selector: 'app-root',
  template: <h1>Your Emoji</h1>
    <div *ngIf="selectedEmoji">{{ selectedEmoji }}</div>
    <button mat-raised-button (click)="openEmojiDialog()">
      Make a selection
    </button>,
  styles: [div {
    padding: 1rem;
  }]
})
export class AppComponent {
  selectedEmoji: string;
  constructor(public dialog: MdDialog) {}
  openEmojiDialog() {
    let dialog = this.dialog.open(ChooseEmojiDialogComponent);
dialog.afterClosed()
  .subscribe(selection => {
    if (selection) {
      this.selectedEmoji = selection;
    } else {
      // User clicked 'Cancel' or clicked outside the dialog
    }
  });

需要注意的几点：

• 我们通过在注入的 MdDialog 实例上调用 open 并传入我们的对话框组件来打开对话框。
• 我们通过订阅 afterClosed 返回的 observable 并提取数据来获取从对话框返回的数据。

对话框组件

我们的对话框组件非常简单，Angular Material 为我们提供了一些指令来帮助设置对话框元素的样式。 这是我们的模板标记：

选择表情符号dialog.html

<h1 mat-dialog-title>Choose Your Destiny:</h1>

<div mat-dialog-content>
  <mat-select [(ngModel)]="choosenEmoji">
    <mat-option *ngFor="let emoji of emojis" [value]="emoji">
      {{ emoji }}
    </mat-option>
  </mat-select>
</div>

<div mat-dialog-actions>
  <button mat-button (click)="confirmSelection()" color="primary">
    Okays!
  </button>
  <button mat-button (click)="dialogRef.close()">
    Cancel
  </button>
</div>

注意使用的几个特殊指令：mat-dialog-title、mat-dialog-content 和 mat-dialog-actions。

---

要使对话框中的操作按钮正常工作，您需要导入 MdDialogRef 并将其注入构造函数以创建对对话框的引用：

选择表情符号dialog.component.ts

import { Component } from '@angular/core';
import { MdDialogRef } from '@angular/material';

@Component({
  selector: 'app-choose-emoji-dialog',
  templateUrl: './choose-emoji-dialog.component.html'
})
export class ChooseEmojiDialogComponent {
  emojis = ['🐼', '💪', '🐷', '🤖', '👽', '🐥'];
  choosenEmoji: string;
  constructor(public dialogRef: MdDialogRef<ChooseEmojiDialogComponent>) { }
  confirmSelection() {
    this.dialogRef.close(this.choosenEmoji);
  }

我们的 confirmSelection 方法关闭了对话框，但也传回了我们需要的数据。

我们现在有一个漂亮的材料设计对话框🎉🐷