问题描述
我正在使用POC应用程序,并且正在尝试使MdDialog
组件正常工作.有没有人知道如何传递给MdDialog
打开方法的示例?
I'm working on a POC app, and I'm trying to get the MdDialog
component working. Does anyone have a working example of what to pass to the MdDialog
open method?
Angular 2.0: https://github.com/angular/angular
Angular 2.0:https://github.com/angular/angular
Angular 2材质: https://github.com/angular/material2
Angular 2 Material:https://github.com/angular/material2
推荐答案
更新为angular v4和@ angular/material 2.0.0-beta.12
md
前缀已更改为mat
导入MatDialogModule
而不是MdDialogModule
@angular/material
现在依赖于@angular/cdk
作为对等依赖项.
@angular/material
now depends on @angular/cdk
as a peer dependency.
回顾: Plunkr
材料对话框+附录"的8个步骤
第1步:安装软件包
npm i --save @angular/material @angular/cdk @angular/animations
第2步:配置systemjs.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步:创建所需的对话框组件,例如:
Step 4:Create desired dialog component like:
@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
数组中:
Step 5:Add the component from step 4 to declarations
and entryComponents
arrays of your NgModule decorator:
@NgModule({
imports: [ BrowserModule, MatDialogModule ],
declarations: [ AppComponent, DialogComponent ],
entryComponents: [ DialogComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule {}
第6步:在您的组件中使用它:
Step 6:Use it in your component:
@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步选择所需的主题:
<link href="https://unpkg.com/@angular/material/prebuilt-themes/deeppurple-amber.css"
rel="stylesheet">
您可以在此处
第8步
如果要将数据传递给模态,请使用以下命令( Plunker ):
If you want to pass data to modal then use the following (Plunker):
dialogRef.componentInstance.param1 = "test value";
附录
路由对话框: Plunkr
可拖动对话框(如何使MatDialog可拖动/角材料)
Plunker Example
另请参见
- Material.Angular.io > Guides > Getting Started
- Master builds
这篇关于带有Angular 2.0的Angular 2.0材质MdDialog的工作示例的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!