Issue
Good morning,
in a app.module.ts:
{path: 'homepage', component: HomepageComponent},
in a xxx.component.ts we have this:
private nameFunction(){
const nameVariable = this.createMyObject(params);
console.log(nameVariable);
this.Router.navigate(['homepage']);
}
Thanks to the console.log() we can see that is an Object like this:
Object: {
information1: Object {...},
information2: Array [...],
information3: Object{...},
information4: Array[...]
}
my question is:
how can I pass "nameVariable" inside the new component called "Homepage"
Solution
There are multiple ways to achieve this:
1- Required path parameters:
// Defining route
{path: 'homepage/:object', component: HomepageComponent}
// Navigation
this.router.navigate(['/homepage', {object: JSON.stringify(nameVariable)}]);
// Read
let object = JSON.parse(this.activatedRoute.snapshot.paramMap.get("object");
console.log(object.information1);
2- Optional path parameters:
// Defining route
{path: 'homepage', component: HomepageComponent}
// Navigation
this.router.navigate(['/homepage', {...nameVariable}]);
// Read
this.activatedRoute.snapshot.paramMap.get("informationX");
3- Query parameters:
// Defining route
{path: 'homepage', component: HomepageComponent}
// Navigation
this.router.navigate(['/homepage'], {queryParams: nameVariable});
// Read
this.activatedRoute.snapshot.queryParamMap.get("information1");
All of three above solutions will spread your object in the URL.
You can also use a shared data member defined in your SharedService which you can populate before performing this.router.navigate
.
Answered By - Abdulrahman Hashem
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.