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

问题描述

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

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);

DialogComponent

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 角材料>，则不再可以访问MdDialogRef<T>的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()装饰器，直到 issue 4086 将得到解决.

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

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