使用Angular 2.0的Angular 2.0 Material MdDialog的工作示例
我正在开发一个POC应用程序，我试图让MdDialog组件工作。 有没有人有一个什么传递给MdDialog打开方法的工作示例？
Anular 2.0： https ： //github.com/angular/angular
Angular 2材质： https ： //github.com/angular/material2
更新到angular度v4和@angular度/材料2.0.0-beta.12
md前缀被改为mat
导入MatDialogModule而不是MdDialogModule
@angular/material现在依赖于@angular/cdk作为对等的依赖。
回顾 一下 ： 普朗克
材料对话框+附录的8个步骤
第1步：安装软件包
npm i --save @angular/material @angular/cdk @angular/animations
第2步：configurationsystemjs.config.js
map: { ... '@angular/animations': 'npm:@angular/animations/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', '@angular/cdk': 'https://unpkg.com/@angular/cdk/bundles/cdk.umd.js', '@angular/cdk/a11y': 'https://unpkg.com/@angular/cdk/bundles/cdk-a11y.umd.js', '@angular/cdk/bidi': 'https://unpkg.com/@angular/cdk/bundles/cdk-bidi.umd.js', '@angular/cdk/coercion': 'https://unpkg.com/@angular/cdk/bundles/cdk-coercion.umd.js', '@angular/cdk/collections': 'https://unpkg.com/@angular/cdk/bundles/cdk-collections.umd.js', '@angular/cdk/keycodes': 'https://unpkg.com/@angular/cdk/bundles/cdk-keycodes.umd.js', '@angular/cdk/observers': 'https://unpkg.com/@angular/cdk/bundles/cdk-observers.umd.js', '@angular/cdk/overlay': 'https://unpkg.com/@angular/cdk/bundles/cdk-overlay.umd.js', '@angular/cdk/platform': 'https://unpkg.com/@angular/cdk/bundles/cdk-platform.umd.js', '@angular/cdk/portal': 'https://unpkg.com/@angular/cdk/bundles/cdk-portal.umd.js', '@angular/cdk/rxjs': 'https://unpkg.com/@angular/cdk/bundles/cdk-rxjs.umd.js', '@angular/cdk/scrolling': 'https://unpkg.com/@angular/cdk/bundles/cdk-scrolling.umd.js', '@angular/cdk/table': 'https://unpkg.com/@angular/cdk/bundles/cdk-table.umd.js', '@angular/cdk/stepper': 'https://unpkg.com/@angular/cdk/bundles/cdk-stepper.umd.js', },
第3步：将 MatDialogModule导入到您的模块
import { MatDialogModule } from '@angular/material'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; @NgModule({ imports: [ BrowserModule, BrowserAnimationsModule, <== required MatDialogModule <== here ], declarations: [ AppComponent], bootstrap: [ AppComponent ] }) export class AppModule {}
第4步：创build所需的对话框组件，如：
@Component({ selector: 'your-dialog-selector', template: ` <h2>Hi! I am modal dialog!</h2> <button mat-raised-button (click)="dialogRef.close()">Close dialog</button>` }) export class DialogComponent { constructor(public dialogRef: MdDialogRef<DialogComponent>) { } }
第5步：将步骤4中的组件添加到NgModule装饰器的declarations和entryComponents数组中：
@NgModule({ imports: [ BrowserModule, MatDialogModule ], declarations: [ AppComponent, DialogComponent ], entryComponents: [ DialogComponent ], bootstrap: [ AppComponent ] }) export class AppModule {}
第6步：在你的组件中使用它：
@Component({ selector: 'my-app', template: `<button mat-raised-button (click)="openDialog()">Open dialog</button>`, }) export class App { constructor(public dialog: MatDialog) { } openDialog(key) { let dialogRef = this.dialog.open(DialogComponent); } }
第7步select所需的主题：
<link href="@angular/material/prebuilt-themes/deeppurple-amber.css" rel="stylesheet">
其他主题，你可以在这里find
第8步
如果你想传递数据到模态然后使用下面的（ Plunker ）：
dialogRef.componentInstance.param1 = "test value";
附录
路由对话框： Plunkr
Plunker例子
也可以看看
- Material.Angular.io>指南>入门
- 大师build造
