data is not updating on page after routing to same url with different params

Question

Basically I have a notification component that show notification on click of icon in header. When we click the icon on header, it opens a popup and shows a list of notification. On clicking any one of the notification, it routes the user to the component of that particular notification, like on clicking notification , it takes user to that route : profile/guest/{guestid}/alerts/{alertid}. But when we click on another notification from the above mentioned route , it chnages the route params but does not reload the data of the new alert and shows the data of the old route only.

Note: data that are shown are fetched from route resolve. And as the component is already loaded , it doesn't call ngOnInit or constructor function when we click on another notification. But when we refresh the page , it show correct data according to the updated route.

I tried implementing different router config solution that reloads the resolves data. such as runGuardsAndResolvers along with onSameUrlNavigation.

I also tried calling the functions that sets data, in other angular component life cycle hooks such as ngAfterViewInit or ngAfterViewChecked.

I tried a few more solutions, but all of them were of no use.

 Notification.component.ts :-(inside header component in shared module)
/**
   * * Callback when user clicks on visit button in notification modal
   * @param notification : notification 
   */
  navigateToGuestOrCustomer(notification: notification) {
    let routePath =
      notification.model == ALERT_MODEL.GUEST ? "guest" : "customers";
    let routeParamId = notification.detail_id;
    let alertId = notification.id;
    this.router.navigate([`/profile/${routePath}/${routeParamId}/alerts/${alertId}`]);
  }


edit-alert.component.ts(inside profile module in guest component>alert component)

  ngOnInit() {
    this.fetchRouteData();
    this.setGuestId();
    this.setGuestName();
  }

  /**
   * * get guest name from route resolve
   */
  setGuestName(): void {
    let guestData = this.route.parent.snapshot.data["editGuestInfo"];
    this.guestName = guestData["name"];
  }

  formData: any;
  alertListForGuest = [];
  /**Fetch Data from Resolve */
  fetchRouteData() {
    this.formData = this.route.snapshot.data["alertDetailForGuest"];
    this.alertListForGuest = this.route.snapshot.data["alertListForGuest"];
    this.alertListForGuest.push(this.formData.alert);
  }

expected result : after clicking on other notification , route parameters should change and show the desired page with the updated data.

actual result : only the route is getting changed , not the data.

Answer 1

ngOnInit might not be called again if only the route changes, but the component is not recreated. You should subscribe to the route changes and perform your fetch and update logic there

import { ActivatedRoute } from '@angular/router`
constructor(private activatedRoute : ActivatedRoute){  }

ngOnInit() {
    this.activatedRoute.url.subscribe(url =>{
        // Code to get the new notification data 
        // and display it
    });
}

In this way when you navigate to a new url, the code is execute again

Answer 2

As you said that it is showing the new data after the refresh of the page, so in that case just try to implement Route Reload on the same page so that it will reload the current route and fetch you the new data.

Answer 3

Not sure why nobody mentioned ActivatedRoute.data since that's exactly what it's for.

An observable of the static and resolved data of this route.

So I'll typically do something like this:

ngOnInit()
{
    this.activatedRoute.data.pipe(takeUntil(this.destroyed)).subscribe(data =>
    {
        // data is your resolved data 
        this.model.page = data.page;
        this.model.options = data.options;
    });
}

This code will be run for both the initial and updated data, so you can remove anything you already have that uses activatedRoute.snapshot.data.

Where this.destroyed is a Subject<void> that is completed with this.destroyed.next() inside ngOnDestroy().

Answer 4

import { Params } from '@angular/router';

ngOnInit(){
  this.route.params.subscribe((params: Params)=>{
    this.formData = params["alertDetailForGuest"];
    this.alertListForGuest = params["alertListForGuest"];
  });
}