I'm trying to send my objectData from a componentA, to DialogComponent to edit object info.
ComponentA opens the dialog and passes the data like this:
export class ComponentA implements OnInit {
constructor(private dialogService: NbDialogService) {}
openDialog(data) {
this.dialogService.open(DialogComponent, {
context: {
product: data,
},
});
}
}
the Nebular DialogComponent its like:
export class DialogComponent implements OnInit {
product: any; <--- the object that the dialogue will receive
preSaleItem: any; <-- and turn into it, within the dialogue.
constructor(
private ref: NbDialogRef<DialogComponent>,
private dataService: DataService,
) {
}
navigateToComponentB() {
this.dataService.data = this.preSaleItem;
this.router.navigate(['/pages/componentB']);
this.close();
}
close() {
this.ref.close();
}
in dialog will fill the preSaleItem with new information and sand to componentB.
I tried two ways to transfer the data, one was by service
export class DataService {
data: any;
constructor() {
console.log(this.data); <----- the return is undefined
}
And nothing returns. I think the Nebular component Dialog is killing the scope.
My ComponentB that will receive the data is:
export class ComponentB implements OnInit {
constructor(private dataService: DataService) {}
ngOnInit() {
this.preSaleItem = this.dataService.data;
console.log(this.preSaleItem); <----- return is the same of the service
}
}
Reinforcing information about the problem: I have a componentA that passes the product to the dialog and builds the preSaleItem that I mentioned earlier, and worked well.
After that, when the preSaleItem was built in the dialog, i need send it to componentB. But the way I thought, through the service does not work. :(
I tried not to go through the dialog, using componentA for service with an observable var for componentB, and it worked. But I need the data to go through the dialog.
What are the possible solutions?
I found a way to solve my problem via the angular route. I will put a simple code to demonstrate. Using state attribute.
export class DialogComponent implements OnInit {
product: any; <--- the object that the dialogue will receive
preSaleItem: any; <-- and transform, to move to componentB.
constructor(private ref: NbDialogRef<DialogComponent>) {}
navigateToOptionals() {
this.fillPreSaleItem();
this.router.navigate(['/pages/componentB', {
state: {
data: this.preSaleItem
}
});
this.close();
}
close() {
this.ref.close();
}
}
how was it in my componentB
export class ComponentB implements OnInit {
item: any;
constructor() {}
ngOnInit() {
this.item = history.state.data;;
console.log(this.item); <----- return my object that i want :)
}
}
I found this site that helped me a lot! https://medium.com/ableneo/how-to-pass-data-between-routed-components-in-angular-2306308d8255