如何传递数据到角质材料对话2 [英] How to pass data to dialog of angular material 2

问题描述

我正在使用角材料2的对话框。

I am using dialog box of angular material2.

我想将数据传递给打开的组件。这是我点击一个按钮打开对话框

I want to pass data to the opened component. Here is how I am opening dialog box on click of a button

let dialogRef = this.dialog.open(DialogComponent, {
            disableClose: true,
            data :{'name':'Sunil'}
        });

在文档页面上有数据属性，但是我在安装的软件包中检查了MdDialogConfig

On the documentation page there is data property, But I checked MdDialogConfig in my installed packages

/**
 * Configuration for opening a modal dialog with the MdDialog service.
 */
export declare class MdDialogConfig {
    viewContainerRef?: ViewContainerRef;
    /** The ARIA role of the dialog element. */
    role?: DialogRole;
    /** Whether the user can use escape or clicking outside to close a modal. */
    disableClose?: boolean;
    /** Width of the dialog. */
    width?: string;
    /** Height of the dialog. */
    height?: string;
    /** Position overrides. */
    position?: DialogPosition;
}

配置类中没有数据属性。

there is no data property in configuration class.

现在我如何访问传递的数据？

Now How can I access that passed data?

推荐答案

更新

您可以使用 dialogRef.componentInstance.myProperty ='some data'设置组件上的数据。

UPDATE

You can use dialogRef.componentInstance.myProperty = 'some data' to set the data on your component.

你需要这样的东西：

let dialogRef = this.dialog.open(DialogComponent, {
            disableClose: true,
        });
dialogRef.componentInstance.name = 'Sunil';

然后在您的 DialogComponent 中，您需要添加您的名称属性：

Then in your DialogComponent you need to add your name property:

...

@Component({
  ...
})
export class DialogComponent {
   public name: string;

   ...

}

文字

我没有找到任何文档，所以我开始研究源代码也。因此，这可能不是正式的方式。

Text below is not valid in newer versions of @angular/material

I didn't find any documentation on this, so i started looking into the source code too. Because of that, this might not be the official way of to do.

我成功将数据放在 dialogRef._containerInstance.dialogConfig.data ;

所以你可以做的是例如

let name = dialogRef._containerInstance.dialogConfig.data.name;
console.log(name); // Sunil

这篇关于如何传递数据到角质材料对话2的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！