Angular 2.0中使用Angular 2.0 Material MdDialog的工作示例

Question

Angular 2.0中使用Angular 2.0 Material MdDialog的工作示例

34

我正在开发一个POC应用程序，尝试让MdDialog组件工作。有人有传递给MdDialog open方法的可行示例吗？

Angular 2.0: https://github.com/angular/angular Angular 2 Material: https://github.com/angular/material2

- Earl Ferguson

这里有所有可能的对话框 https://material.angularjs.org/latest/demo/dialog，示例代码在这里 http://codepen.io/cyrilcherian/pen/GoJeom - Cyril Cherian

2

我正在寻找使用Angular 2.0 Material和Angular 2.0的示例。https://github.com/angular/angular/tree/master/modules/angular2_material - Earl Ferguson

你找到了吗？ - UzUmAkI_NaRuTo

链接已过期。 - Vassilis Pits

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- yurzui · Accepted Answer

更新至Angular v4和@angular/material 2.0.0-beta.12版本

md前缀已更改为mat

导入MatDialogModule而不是MdDialogModule

@angular/material现在将@angular/cdk作为对等依赖项。

概述: 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： 创建您所需的对话框组件，例如：

@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： 将第四步中的组件添加到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：选择所需的主题：

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

其他主题可以在这里找到。

第8步

如果要将数据传递给模态框，则使用以下方法（Plunker）：

dialogRef.componentInstance.param1 = "test value";

附录

路由对话框：Plunkr

可拖动的对话框（如何使MatDialog可拖动 / Angular Material）

Plunker示例

另请参阅