在Angular 2上使用MdDialogConfig数据

发布时间：2020-12-17 06:57:47 所属栏目：安全来源：网络整理

导读：我正在尝试使用@ angular / material2.0.0-beta.1在Angular 2中使用 dialog component.我想要完成的是发送数据(这是人们从界面中选择的值,该对话框用于使人确认他们选择的值)到对话框并显示它.所以例如对话框应该这样说：你选择了：选项1：价值选项2：价

我正在尝试使用@ 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);

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',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开始,不再可能访问MdDialogRef< T>的config(和config.data)属性.相反,您应该注入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得到解决.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!