How to trigger route resolver manually

Question

I'm resolving a user before accessing the account fragment of my user page :

app-routing.component.ts

{
  path: 'users/:id',
  component: UserComponent,
  resolve: {user: UsersService},
  children: [
    {path: '', pathMatch: 'full', redirectTo: 'account'},
    {path: 'account', component: UserAccountComponent},
    {path: 'sites', component: UserSitesComponent}
  ]
}

users.service.ts

resolve(route: ActivatedRouteSnapshot, r: RouterStateSnapshot) {
  return this.getUser(route.params['id']);
}

user-account.component.ts

ngOnInit() {
  this.route.parent.data.subscribe(data => {
    this.user = data['user'];
    // Initialize the form and its validators
    this.initForm();
  });
}

In the user account component I can save or reset the form. In both cases I'd like to update the user of the component and to reset the form and the validators. Ideally It'd like the subscription to be triggered again.

Any idea how to trigger the resolver manually ?

(I used to re-navigate to the same route modulo a random number as the last fragment, but since I exploded my user page into parent/children routes, the resolver, within the parent, is not called anymore when the last fragment changes)

An alternative would be to use a service instead of a resolver. A custom reuse strategy might also work as mentioned in http://stackoverflow.com/questions/39762485/want-to-prevent-component-recreation-while-routing-in-angular-2/39763254#39763254 — Günter Zöchbauer, Jan 23 '17 at 11:17

score 16 · Answer 1 · answered Mar 29 '18 at 23:06

I agree with "Woot", but if you want to trigger the resolver again, go to your routing module and add

runGuardsAndResolvers: "always"

Now you can navigate on the same page again an the resolver will run again. But be aware only the resolver will run again, no other lifecyle, like "ngOnInit".

Example according to you code

app-routing.component.ts

{
  path: 'users/:id',
  component: UserComponent,
  resolve: {user: UsersService},
  children: [
    {path: '', pathMatch: 'full', redirectTo: 'account'},
    {path: 'account', component: UserAccountComponent, runGuardsAndResolvers: "always"},
    {path: 'sites', component: UserSitesComponent}
  ]
}

Now if you route to the same page again the subscription on your user-account.component.ts will be triggered again

score 2 · Answer 2 · answered Jul 01 '20 at 11:10

If you need to rerun your guards and resolvers for specific conditions (specific queryparams, ...) there also the more flexible option to pass a function to runGuardsAndResolvers in the routing module. Example:

const routes: Routes = [
  {
    path: 'home/:id',
    component: HomeComponent,
    ...
    runGuardsAndResolvers: (curr: ActivatedRouteSnapshot, future: ActivatedRouteSnapshot) => {
      // inspect the current router state and then return true|false
      return false;
    }
  }
];

Example taken from the following article:

https://juristr.com/blog/2019/01/Explore-Angular-Routers-runGuardsAndResolvers/

score 1 · Answer 3 · answered Feb 07 '18 at 19:12

Typically you wouldn't want to trigger a route resolver manually.

Since your resolver looks to be part of your service and all it does is call this.getUser(id) you could easily call it after a change is made.

What I would do in this scenario is have my service injected into my class, and then after the action that updates the user call the this.getUser(id).

Possible implementation

export class UserAccountComponent implements OnInit {
  userId: number;
  constructor(private route: ActivatedRoute, private userService: UserService) {}

  ngOnInit() {
    this.route.params.pipe(
      do((params) => {
        this.userId = +params['id'];
      }),
      take(1)
    );
  }

  doSomeChange() {
    // this will execute a change and update the user.
    this.userService.get(this.userId);
  }
}

Note: I am using code that is dependent on rxjs 5.5 Additionally your service must be included in your providers for this to work

How to trigger route resolver manually

3 Answers3

Linked