在 Angular 2 上使用 MdDialogConfig 数据 [英] Using MdDialogConfig data on Angular 2

问题描述

我正在尝试使用 在 Angular 2 中使用 对话框组件@angular/material2.0.0-beta.1.我想要完成的是将数据(这是一个人从界面中选择的值，对话框用于使人确认他们选择的值)到对话框并显示它.例如，对话框应该这样说:

I'm trying to use a dialog component in Angular 2 using @angular/material2.0.0-beta.1. What I'm trying to accomplish is to send data (which are values that a person chooses from the interface, the dialog is used to make the person confirm the values they chose) to the dialog and display it. So for example the dialog should say something like this:

您选择了:

选项 1:价值

选项 2:价值

选项 3:价值

取消 |确认

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

How can I pass these values to the dialog I create so that I can just access them like so {{value}} in the view template? I think its using the data config, but I can't seem to find good documentation or examples on how to use it. Here's what I've been trying:

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>) {}
}

推荐答案

在父组件中:

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 版本):

And sample template (HTML version):

<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

自 2.0.0-beta.3 版 的 Angular Material，不再可能访问 MdDialogRef 的 config(和 config.data)属性.相反，您应该注入 MD_DIALOG_DATA 令牌以访问传递到对话框组件中的任何数据.

Update — @angular/material 2.0.0-beta.3

Since version 2.0.0-beta.3 of Angular Material, it is no longer possible to access config (and config.data) property of MdDialogRef<T>. Instead, you should inject MD_DIALOG_DATA token to access any data passed into your dialog component.

进口:

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() 装饰器，直到 问题 4086 将得到解决.

In many cases you’ll need to keep the @Optional() decorator, until issue 4086 will get resolved.

这篇关于在 Angular 2 上使用 MdDialogConfig 数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！