Angular ActivatedRoute params subscription in parent component only fired once

Question

I have a container Component AdminComponent which has different childs:

{ path: ":company/admin", component: AdminComponent, children: [ { path: "", component: LoginComponent }, { path: "account", component: AccountComponent, canActivate: [RedirectGuard] }, { path: "detail", component: AdminlayoutsComponent, canActivate: [RedirectGuard] } ] }

But my route subscription is only fired once and not on route change:

export class AdminComponent { constructor( private activatedRoute: ActivatedRoute ) { this.activatedRoute.params.subscribe((params: Params) => { console.log("####params", params); }); } }

How can I trigger the route change event on every route change in my parent component?

Have you tried with RouterModule.forRoot(routes, {onSameUrlNavigation: 'reload'}) in your main routing module? — Robert garcia
– Robert garcia, Commented Oct 4, 2019 at 9:38
stackblitz.com/edit/onsameurlnavigation-demo please look on it — varman
– varman, Commented Oct 4, 2019 at 9:40
Seems weird, i have the same structure in a project and it works, can you provide a repo? — Robert garcia
– Robert garcia, Commented Oct 4, 2019 at 9:48

user4676340 · Accepted Answer · 2019-10-04 09:54:37Z

In Angular, every route is its own instance.

This means that if you want to listen to the params of the child, you have to listen to the child of the route you're on.

Here is a demo showing it.

 constructor(private route: ActivatedRoute) { route.children[0].params.subscribe(params => { console.log(params); }); }

Although I should warn you, this isn't a very good practice, because the parent not always know if the child is there (while the opposite isn't true). You should just listen to routing events in the child component.

daniel · Accepted Answer · 2019-10-04 12:10:53Z

events are not fired because: in path: ":company/admin", only first part of path is the param. Right event listener is:

 router.events.subscribe((val) => { // do stuff )};

Collectives™ on Stack Overflow

Angular ActivatedRoute params subscription in parent component only fired once

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related