How to refresh a route's resolved data

user_8078787 0
Viewed 15644

Consider the following route configuration:

const routes: Routes = [
  {
    path: '',
    component: AppComponent,
    resolve: {
      app: AppResolver
    },
    children: [
      {
        path: 'user/:uid',
        resolve: {
          user: UserResolver
        },
        children: [
          {
            path: '',
            component: ViewUserComponent
          },
          {
            path: 'edit',
            component: EditUserComponent
          }
        ]
      }
    ]
  }
];

The user data are retrieved by UserResolver for any children of route /user/:uid. Using this data, a user profile can be viewed by navigating to /user/:uid and then edited by navigating to /user/:uid/edit. Upon a successful edit, one would expect to be redirected to the user's updated profile (/user/:uid).

However, both the view and edit page being children of the resolved route, the resolver is not triggered when navigating from one to the other.

Consequently, when navigating back from the edit component to the view component, the data displayed is still the old, non-updated one.

Would there be any way to invalidate the resolved user data to force the resolver to fetch it again from the server? Or is there any other way to achieve that kind of result?

The app data being unchanged, we shouldn't have to reload it.

angular2-router angular typescript
4 Answers

You can try something like this:

constructor(private activatedRoute: ActivatedRoute) {
  this.activatedRoute.parent.data.subscribe(data => {
    this.profile = data.profile;
  });
}

updateProfile(newProfile) {
  (this.activatedRoute.parent.data as BehaviorSubject<any>).next({profile: newProfile});
}
user_56582330

By above way i can call the resolver. But it not change data which comes from my backend server so i got one solution i call my service method again in success part and got new changed data from backend server.

user_74788380
Related