Angular 2.0 Material MdDialog 与 Angular 2.0 的工作示例

Posted 2023-02-22

【中文标题】Angular 2.0 Material MdDialog 与 Angular 2.0 的工作示例

【英文标题】：Working example of Angular 2.0 Material MdDialog with Angular 2.0

【发布时间】：2016-03-16 07:22:12

【问题描述】：

我正在开发 POC 应用程序，并且正在尝试使 MdDialog 组件正常工作。有没有人有一个工作示例来说明将什么传递给MdDialog open 方法？

Angular 2.0： https://github.com/angular/angular

Angular 2 材质： https://github.com/angular/material2

【问题讨论】：

此处所有可能的对话框material.angularjs.org/latest/demo/dialog codepen 示例此处codepen.io/cyrilcherian/pen/GoJeom

我正在寻找使用 Angular 2.0 Material 和 Angular 2.0 的示例。 github.com/angular/angular/tree/master/modules/…

你找到了吗？

链接已过时。

【参考方案1】：

更新到 angular v4 和 @angular/material 2.0.0-beta.12

md前缀改为mat

导入MatDialogModule 而不是MdDialogModule

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

回顾：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 步： 创建所需的对话框组件，例如：

@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 步 选择所需的主题：

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

您可以找到here的其他主题

第 8 步

如果您想将数据传递给模态，请使用以下命令 (Plunker)：

dialogRef.componentInstance.param1 = "test value";

附录

路由对话：Plunkr

可拖动对话框 (How can i make a MatDialog draggable / Angular Material)

---

Plunker Example

另见

Material.Angular.io > Guides > Getting Started Master builds

【讨论】：

谢谢，这为我节省了很多时间。我发现我还必须将对话框添加到 NgModule 中的“声明”中才能正常工作（plunker 也这样做）。您也可以将结果发送到 dialogRef.close() 并在可观察订阅函数中访问它。这对于确认对话框等很有用。

我也可以将值传递给对话框组件吗？

@Sumit Agarwal 看到这个问题***.com/questions/40826073/…

我们可以避免使用服务类吗？

@Sumit Agarwal plnkr.co/edit/n185tQbEHg1xGlNCAdxQ?p=preview 见行this.dialogRef.componentInstance.param1 = "test value";