角度2.0材料MdDialog与角度2.0的工作实例

回顾https://plnkr.co/edit/6o8UrUwfLIEHBUa3IaBB?p=preview

6步到材质对话框

步骤1：
安装包

npm i --save @angular/material,@angular/animations

第2步：
配置systemjs配置

map: {
  ...
  '@angular/animations': 'npm:@angular/animations@next/bundles/animations.umd.js','@angular/animations/browser': 'npm:@angular/animations/bundles/animations-browser.umd.js','@angular/platform-browser/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.umd.js','@angular/material': 'npm:@angular/material/bundles/material.umd.js'
},

步骤3：
将MaterialModule.forRoot()导入到您的模块

import { MaterialModule } from '@angular/material';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  imports: [ 
    BrowserModule,BrowserAnimationsModule,<== required
    MaterialModule.forRoot() <== here
  ],declarations: [ AppComponent],bootstrap: [ AppComponent ]
})
export class AppModule {}

步骤4：
创建所需的对话组件，如：

@Component({
  selector: 'your-dialog-selector',template: `
  <h2>Hi! I am modal dialog!</h2>
  <button md-raised-button (click)="dialogRef.close()">Close dialog</button>`
})
export class DialogComponent {
  constructor(public dialogRef: MdDialogRef<any>) { }
}

步骤5：
将步骤4中的组件添加到NgModule装饰器的声明和entryComponents数组中：

@NgModule({
  imports: [ BrowserModule,MaterialModule.forRoot() ],declarations: [ AppComponent,DialogComponent],entryComponents: [DialogComponent],bootstrap: [ AppComponent ]
})
export class AppModule {}

步骤6：
在您的组件中使用它：

@Component({
  selector: 'my-app',template: `<button md-raised-button (click)="open()">Open dialog</button>`,})
export class App {
  dialogRef: MdDialogRef<any>;

  constructor(
      public dialog: MdDialog,public viewContainerRef: ViewContainerRef) { }

  open(key) {
    let config = new MdDialogConfig();
    config.viewContainerRef = this.viewContainerRef;

    this.dialogRef = this.dialog.open(DialogComponent,config);

    this.dialogRef.afterClosed().subscribe(result => {
      this.dialogRef = null;
    });
  }
}

步骤7
挑选所需的主题

<link href="https://unpkg.com/@angular/material/prebuilt-themes/deeppurple-amber.css" 
  rel="stylesheet">

其他主题你可以在这里找到https://github.com/angular/material2-builds/tree/master/prebuilt-themes

步骤8

如果要将数据传递给模态，请使用以下(Plunker)：

this.dialogRef.componentInstance.param1 = "test value";

最后看Plunker Example

也可以看看

> https://github.com/angular/material2/blob/master/guides/getting-started.md
> https://github.com/angular/material2-builds