我们查看了许多具有角度材质的Available components]，但省略了对话框，因为与大多数其他角度材质组件相比，它们的设置稍微复杂一些。所以对话有他们自己的帖子了！
我们将实现一个简单的对话框，允许您选择表情符号。调用该对话框的组件随后将取回用户的选择：
首先，您需要确保您的项目具有正确的角度材质setup]。在这里，我们还假设您有一个项目是从Angel CLI.]开始的
对话框组件
使用角度材质，对话框是单独的组件，因此第一步是为您的对话框创建组件。使用角度CLI，您可以执行以下操作：
1$ ng g component choose-emoji-dialog
导入对话框组件
然后，您需要在应用程序模块和将调用对话框的组件中导入对话框组件。在app模块中，您还将把组件添加到声明和条目组件中：
1[label App Module: app.module.ts]
2import { BrowserModule } from '@angular/platform-browser';
3import { NgModule } from '@angular/core';
4import { FormsModule } from '@angular/forms';
5import { MaterialModule } from '@angular/material';
6import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
7
8import { AppComponent } from './app.component';
9import { ChooseEmojiDialogComponent } from './choose-emoji-dialog/choose-emoji-dialog.component';
导入和注入MdDialog
在我们的主应用程序组件(将调用该对话框的组件)中，我们还将导入MdDialog并将其注入到类构造函数中：
1[label app.component.ts]
2import { Component } from '@angular/core';
3import { ChooseEmojiDialogComponent }
4 from './choose-emoji-dialog/choose-emoji-dialog.component';
5import { MdDialog } from '@angular/material';
6
7@Component({
8 selector: 'app-root',
9 template: <h1>Your Emoji</h1>
10 <div *ngIf="selectedEmoji">{{ selectedEmoji }}</div>
11 <button mat-raised-button (click)="openEmojiDialog()">
12 Make a selection
13 </button>,
14 styles: [div {
15 padding: 1rem;
16 }]
17})
18export class AppComponent {
19 selectedEmoji: string;
20 constructor(public dialog: MdDialog) {}
21 openEmojiDialog() {
22 let dialog = this.dialog.open(ChooseEmojiDialogComponent);
23dialog.afterClosed()
24 .subscribe(selection => {
25 if (selection) {
26 this.selectedEmoji = selection;
27 } else {
28 // User clicked 'Cancel' or clicked outside the dialog
29 }
30 });
以下是需要注意的几点：
- 我们通过在注入的MdDialog实例上调用Open并传入我们的对话框组件来打开对话框。
- 我们通过订阅After Closed Returns并提取数据来获取从对话框返回的数据。
==引用=外部链接==
我们的对话框组件非常简单，并且角度材料为我们提供了一些指令来帮助我们设计对话框元素的样式。以下是我们的模板标记：
1[label choose-emoji-dialog.html]
2<h1 mat-dialog-title>Choose Your Destiny:</h1>
3
4<div mat-dialog-content>
5 <mat-select [(ngModel)]="choosenEmoji">
6 <mat-option *ngFor="let emoji of emojis" [value]="emoji">
7 {{ emoji }}
8 </mat-option>
9 </mat-select>
10</div>
11
12<div mat-dialog-actions>
13 <button mat-button (click)="confirmSelection()" color="primary">
14 Okays!
15 </button>
16 <button mat-button (click)="dialogRef.close()">
17 Cancel
18 </button>
19</div>
请注意使用的几个特殊指令：mat-对话-标题、mat-对话-内容和mat-对话-动作。
要使对话框中的操作按钮正常工作，您需要导入MdDialogRef并将其注入构造函数以创建对该对话框的引用：
1[label choose-emoji-dialog.component.ts]
2import { Component } from '@angular/core';
3import { MdDialogRef } from '@angular/material';
4
5@Component({
6 selector: 'app-choose-emoji-dialog',
7 templateUrl: './choose-emoji-dialog.component.html'
8})
9export class ChooseEmojiDialogComponent {
10 emojis = ['🐼', '💪', '🐷', '🤖', '👽', '🐥'];
11 choosenEmoji: string;
12 constructor(public dialogRef: MdDialogRef<ChooseEmojiDialogComponent>) { }
13 confirmSelection() {
14 this.dialogRef.close(this.choosenEmoji);
15 }
我们的confirmSelection方法关闭了对话框，但也传回了我们需要的数据。
我们现在有一个漂亮的材料设计对话框
