parametros - pasar datos entre componentes angular 6
Cómo pasar datos al diálogo de material angular 2 (2)
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?
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
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