parametros - pasar datos entre componentes angular 6

Cómo pasar datos al diálogo de material angular 2

Question

Estoy usando un cuadro de diálogo de material angular2.

Quiero pasar datos al componente abierto. Aquí está cómo estoy abriendo el cuadro de diálogo al hacer clic en un botón

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

En la página de documentación hay propiedad de datos, pero comprobé MdDialogConfig en mis paquetes instalados

/**
* 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;
}

no hay propiedad de datos en la clase de configuración.

Ahora, ¿cómo puedo acceder a los datos pasados?

Answer 1

ACTUALIZAR

Puede usar dialogRef.componentInstance.myProperty = ''some data'' para establecer los datos en su componente.

Necesitarías algo como esto:

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

Luego, en su DialogComponent necesita agregar su name property :

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

El texto a continuación no es válido en las versiones más nuevas de @ angular / material

No encontré documentación sobre esto, así que también comencé a buscar el código fuente. Por eso, esta podría no ser la forma oficial de hacerlo.

dialogRef._containerInstance.dialogConfig.data éxito los datos en dialogRef._containerInstance.dialogConfig.data ;

Entonces, lo que puedes hacer es, por ejemplo,

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

Answer 2

Para la versión más nueva de diálogo ( Esto es anterior a Angular 5, para 5 ver la actualización a continuación) , puede hacer lo siguiente para pasar datos a través de la configuración, que es mucho más simple y limpia.

Cuando abre el diálogo, puede hacerlo de esta manera agregando datos como un parámetro de configuración (simplemente ignore el ancho y la altura que hay para fines ilustrativos):

this.dialogRef = this.dialog.open(someComponent, {
width: 330px,
height: 400px,
data: {
dataKey: yourData
}
});

Luego, en el componente que se abre en el cuadro de diálogo, puede acceder a este como:

import {MD_DIALOG_DATA} from ''@angular/material'';
constructor(
@Inject(MD_DIALOG_DATA) public data: any
) { }
ngOnInit() {
// will log the entire data object
console.log(this.data)
}

O puede usar acceder a ella en la plantilla u otros métodos, pero entiende el punto.

ACTUALIZACIÓN para Angular 5

Todo en el material ha cambiado de Md a Mat, por lo que si está en Angular 5, importe como:

import {MAT_DIALOG_DATA) from ''@angular/material''

Luego inyecta como

@Inject(MAT_DIALOG_DATA) public data: any