In my current situation, I need to trigger the subscribe action only when either the parameters in the URL change or when showList changes in the query parameter. The rest of the query parameters like
page=0&size=5&sort=name,ascshowList query parameter.
The route changes occur as follows: when the showList button is clicked,
http://localhost:8080/org/acount/param1/param2?showList=true
http://localhost:8080/org/acount/param1/param2?showList=true&page=0&size=5&sort=name,asc
The second navigation occurs because when showList is true, an API call is made to fetch the list of accounts and if the API returns a non-empty result, then page, size, and sort are set.
If the hide button is pressed, the route changes to:
http://localhost:8080/org/acount/param1/param2?showList=false
I also need to handle cases like reload and when the back button is pressed.
To address the above scenario, I have implemented the following solution, although I acknowledge that it may not be the most optimal approach:
this.params_subscribe = combineLatest([this.activatedRoute.params, this.activatedRoute.queryParams]).pipe(
map(results => ({ param: results[0], query: results[1] }))
).subscribe(result => {
let show_list: boolean = (result.query.showList === 'true');
if ((JSON.stringify(result.param) !== JSON.stringify(this.prevParam)) || (result.query.showList !== this.prevQueryParam.showList)) {
if (!this.from_ui || result.query.showList !== 'false') {
if (result.param.teamId && result.param.breadcrumb) {
...
}
else {
this.initialize()
}
}
}
this.prevParam = result.param;
this.prevQueryParam = result.query;
});
from_ui is utilized to prevent the function from being called if the query parameter has changed by clicking the hideList button which sets showList to false.
Is there a more effective way to handle this situation?