Issue
So what I am trying to do is. I have three components in angular2+ Application
1 Home with (/home) route
2 Products with (/product) route
3 ViewProducts with (/view product) route.
HomeComponent has Feature products.
ProductComponent has only products.
They both have a method that routes them to viewProduct Component with their feature/product _id.
Now ViewCompnenet should check that from which component the _id is coming by checking the previous
route and then do some actions according to the route.
Here is my snippet.
for example
in FeatureProductComponent / ProductComponet both have this method
SendProductId(_ProductId){
this._MessengerService.SendFeatureProductId(_ProductId);//I am using rxjs to send data to viewComponent
this._Router.navigate(['viewProduct']);
}
Now at ViewProduct Component.ts
ngOnInit(): void {
if(_Id is coming from /home (route or slug){
//run some block of code here
}else if(_id is coming from /product (route or slug)){
///run some block of code here
}
}
Solution
Here’s a StackBlitz with what you want:
https://stackblitz.com/edit/angular-ivy-xceqqt?embed=1&file=src/index.html
-
In the
home.component.html
and the list.component.html, I’ve specified query parameters on thea
elements, which will be appended on navigation to the show.component.<a ... [routerLink]='["/product", i]' [queryParams]="{from: 'home'}"><!-- or 'list' --> Go to product {{ i }} </a>
-
In the
show.component.ts
I’m reading the value of the query parameterconstructor(private route: ActivatedRoute) { this.route.queryParams.subscribe((params) => { this.from = <string>params.from; }); }
-
Here you can put your
if
clause to decide what actions need to be taken.