As I venture into the world of Angular2, I am finding it a bit more challenging compared to Angular 1. In Angular 1, it was straightforward to specify {reload: false} to avoid reloading the component while changing the query param in the route. However, I haven't been able to find a similar solution in Angular 2.
In my HTML template, I have a button that changes the query parameter when clicked.
On click of the button, the method updateRoute({type: 'app_dependency'}) is called:
ngOnInit() {
console.log(`ngOnInit - is called.`);
}
public updateRoute(urlObject) {
let queryParams = this.activatedRoute.snapshot.queryParams;
let updatedQuery = clone(queryParams);
this.activeTab = updatedQuery.type || 'app_dependency';
forEach(urlObject, (value, key) => {
updatedQuery[key] = value;
});
this.router.navigate([], {
relativeTo: this.activatedRoute,
queryParams: queryParams
});
}
Each time this function is called, it destroys the component and calls ngOnInit().
Is there a way to simply change the URL query without reloading the component? If so, any suggestions or help on a better approach would be greatly appreciated.