我正在使用POC应用程序，我正在尝试让MdDialog组件工作。有没有人有一个工作的例子，传递给MdDialog开放方法？
Anular 2.0：
https://github.com/angular/angular
更新到角v4
原文链接：https://www.f2er.com/angularjs/144152.html回顾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";
也可以看看
> https://github.com/angular/material2/blob/master/guides/getting-started.md
> https://github.com/angular/material2-builds
