在 Angular 2 上使用 MdDialogConfig 数据

Question

我正在尝试使用 @angular/material2.0.0-beta.1 在 Angular 2 中使用 dialog component。我想要完成的是将数据（这是一个人从界面中选择的值，该对话框用于使该人确认他们选择的值）发送到对话框并显示它。因此，例如对话框应该这样说：

您选择了：

选项 1：价值

选项 2：值

选项 3：值

取消 |确认

如何将这些值传递到我创建的对话框，以便我可以像视图模板中的 {{value}} 一样访问它们？我认为它使用数据配置，但我似乎找不到关于如何使用它的好的文档或示例。这是我一直在尝试的：

let config = new MdDialogConfig().data();
let dialogRef = this.dialog.open(DialogComponent);

对话框组件

import { Component } from '@angular/core';
import { MdDialogRef } from '@angular/material';

@Component({
   selector: 'dialog',
   template: require('./dialog.component.pug'),
   styleUrls: [
     './dialog.component.scss'
   ]
})

export class DialogComponent {
   constructor(public dialogRef: MdDialogRef<DialogComponent>) {}
}

Answer 1

在父组件中：

const config = new MdDialogConfig();

config.data = [
  // for example:
  'value 1',
  'value 2'
];

const dialogRef = this.dialog.open(DialogComponent, config);

DialogComponent:

import { Component, OnInit } from '@angular/core';
import { MdDialogRef }       from '@angular/material';

@Component({
  selector: 'dialog',
  template: require('./dialog.component.pug'),
  styleUrls: [
    './dialog.component.scss'
  ]
})
export class DialogComponent implements OnInit {
  private values;

  constructor(public dialogRef: MdDialogRef<DialogComponent>) {}

  ngOnInit(): void {
    this.values = this.dialogRef.config.data;
  }
}

和样本模板（HTML版本）：

<md-dialog-content>
  <md-list *ngIf="values">
    <md-list-item *ngFor="let value of values">{{ value }}</md-list-item>
  </md-list>
</md-dialog-content>

更新 — `@angular/material` 2.0.0-beta.3

自 Angular Material 的 version 2.0.0-beta.3 起，无法再访问 config（和 config.data）MdDialogRef<T> 的属性。相反，您应该注入 MD_DIALOG_DATA 令牌以访问传递到对话框组件中的任何数据。

进口：

import { Component, Inject, OnInit, Optional } from '@angular/core';
import { MD_DIALOG_DATA, MdDialogRef }         from '@angular/material';

构造函数：

constructor(
  @Optional() @Inject(MD_DIALOG_DATA) private dialogData: any,
  private dialogRef: MdDialogRef<DialogComponent>
) {}

ngOnInit方法：

ngOnInit(): void {
  // alternatively, rename ‘dialogData’ to ‘values’ and remove the
  // ‘ngOnInit’ method
  this.values = this.dialogData;
}

在许多情况下，您需要保留 @Optional() 装饰器，直到 issue 4086 得到解决。

Answer 2

更新：一定要用上面的Inject方法来获取你的数据。这种方式依赖于访问私有成员，该成员不能保证在版本之间保持不变

如果您使用的是新的 2.0.0 beta 3（或者它可能在 beta 2 中发生了变化，不确定）那么上面的答案必须稍微改变一下：

@Component({
selector: "dialog",
templateUrl: "./dialog.component.html"
})
export class DialogComponent {
    constructor(public dialogRef: MdDialogRef<DialogComponent>) { }
    type: string;
    name: string;
    ngOnInit(): void {
        let configData: any = this.dialogRef._containerInstance.dialogConfig.data;
        this.type = configData.type;
        this.name = configData.name;
   }
}

似乎应该有比 this.dialogRef._containerInstance.dialogConfig.data 更好的引用数据的方法，但我找不到

Answer 3

另一种方法是在父组件中设置值 DialogComponent

@Component({
selector: "dialog",
templateUrl: "./dialog.component.html"
})
export class DialogComponent {
    constructor(public dialogRef: MdDialogRef<DialogComponent>) { }
    type: string;
    name: string;
    ngOnInit(): void {

   }
}

父组件

let dialogRef = this.dialog.open(DialogComponent);
dialogRef.componentInstance.type= title;
dialogRef.componentInstance.name= url;

在 Angular 2 上使用 MdDialogConfig 数据

Using MdDialogConfig data on Angular 2

angular-material

mddialog

angular

更新 — `@angular/material` 2.0.0-beta.3

在 Angular 2 上使用 MdDialogConfig 数据

Using MdDialogConfig data on Angular 2

angular-material

mddialog

angular

更新 — @angular/material 2.0.0-beta.3

更新 — `@angular/material` 2.0.0-beta.3