CODEWITHSUNDEEP
angularroutesrxjsangular-router
John Henckel
John Henckel

Reputation: 11347

Subscription to ActivatedRoute.params isnt triggered

The problem is that my component is not redrawn when I navigate between two similar URLs. For example, when the user is look at http://localhost:8088/#/app/route/study/6/detail and then navigates to http://localhost:8088/#/app/route/study/7/detail, the StudyComponent is correctly reloaded. However, the DetailComponent is not reloaded. I think the reason is that the params of the detail did not change, so Angular thinks it is ok to not reload. But in my case the details depend on the parent params.

How can I fix this?

My routes:

const studyRoutes: Routes = [
    {
        path: '', component: RouteComponent,
        children:  [
            {path: 'study/:id', component: StudyComponent,
            children: [
                {path: 'detail', component: DetailComponent },
                {path: 'parts', component: PartsComponent }
            ]
        }
    ]
}
];

All my components are initialized like this:

ngOnInit() {
    this.loader = this.route.params.subscribe(params => this.onLoad());
}

ngOnDestroy() {
    this.loader.unsubscribe();
}

When I navigate between the details of different studies the onLoad is never called in the DetailComponent.

Upvotes: 5

Views: 6797

Answers (1)

Jota.Toledo
Jota.Toledo

Reputation: 28434

To react on changes to the :id parameter at the DetailComponent level, youll need to do the following changes:

// detail.component.ts
ngOnInit() {
    this.loader = this.route.parent.params.subscribe(params => this.onLoad());
}

This is because the path detail in your routes does not define the :id parameter, the parent of it does. So the changes are reflected at that level in the router state tree.

Upvotes: 5

Related Questions