Angular 2.0 Material MdDialog 与 Angular 2.0 的工作示例 [英] Working example of Angular 2.0 Material MdDialog with Angular 2.0

问题描述

我正在开发一个 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

Material Dialog + 附录的 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 步:在您的组件中使用它:

@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 示例

另见

• Material.Angular.io > 指南 > 入门
• 主构建

这篇关于Angular 2.0 Material MdDialog 与 Angular 2.0 的工作示例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！