I'm trying to pass some data when opening a material dialog panel. The following example is what I learned from here
If you want to share data with your dialog, you can use the data option to pass information to the dialog component.
let dialogRef = dialog.open(YourDialog, {
data: { name: 'austin' },
});
To access the data in your dialog component, you have to use the MAT_DIALOG_DATA injection token:
import {Component, Inject} from '@angular/core';
import {MAT_DIALOG_DATA} from '@angular/material';
@Component({
selector: 'your-dialog',
template: 'passed in {{ data.name }}',
})
export class YourDialog {
data: any[] = []; // existing code, conflict
constructor(@Inject(MAT_DIALOG_DATA) public data: any) { }
}
Now the problem is in the dialog component, there has been already a variable data
defined and used. And the variable name data
being passed into the dialog as config is dictated by Angular Material Dialog. So it causes a naming conflict. I could change the existing data
variable to something else to give way to the Angular injected data
, but is there a way to change the injected data
to be something else? Thanks.
You do not have to keep the same variable names.
constructor(@Inject(MAT_DIALOG_DATA) public anyOtherNameHereIsOk: any) { }
Why this works is that the parameter is already being decorated with @Inject(MAT_DIALOG_DATA)
so the actual name of the parameter does not matter. Use a name that works best given the type of data and how it is used (and any other naming rules you might be accustomed to).
Stackblitz , see class DialogDataExampleDialog
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.