Angular2 : How to refresh resolver dependent components?

问题

I have three components, each have their own resolver that fetch data from a different API. To do so, these components rely on an url, that is shared between them using a service.

I want that when a change to that url happens, each components reloads itself, i.e to restart the resolvers.

I had a look at several related S.O questions, but none mention how to do so when using resolvers, cf : question 1,question 2,question 3

I can think of two ways :

The dirty way : Force the refreshing of the component using a router redirect and a blank component.

this.router.navigateByUrl('blank',true);
this.router.navigateByUrl('home/(mapps:mobil//sw:simil//sf:sales)');

But that didn't work. There is a refresh, but the resolvers aren't...resolved.

The other way : use a BehaviorSubject or a ChangeDetectorRef. But then, I am clueless as to how to achieve it, considering detecting changes within my components won't help me actually restart the resolvers.

My feeling is that this has to be done through the router somehow, because it is the one knowing about the resolvers :

const routes: Routes = [
  {
    path: '',
    redirectTo: 'home',
    pathMatch: 'full'
  },
  {
    path: 'home',
    component: HomeComponent,
    children : [
      {
        path: '',
        component: BlankComponent
      },
      {
        path: 'simil',
        component: SwComponent,
        outlet: 'sw',
        resolve: {
          data: SwResolve
        }
      },
      {
        path: 'sales',
        component: SalesComponent,
        outlet: 'sf',
        resolve: {
          data: SalesResolve
        }
      }
    ]
  },
  {
    path: 'blank',
    component: BlankComponent
  }
];

Any hints on how to achieved this ?

Edit : Here is the related plunkr

Edit Jun 17 : There is no need for the blank component workaround anymore. To refresh components, simply call back the route :

this.router.navigateByUrl('home/(mapps:mobil//sw:simil//sf:sales)')

回答1:

It is not currently possible to refresh routes. It will probably be possible to do that with RouteReuseStrategy in Angular 2.3.

Resolvers are reevaluated when a route changes and can be observed from ActivatedRoute. They are not reevaluated if a route stays the same (no param is changed) and should be designed accordingly.

Route change is asynchronous, the workaround is to chain route changes:

this.router.navigateByUrl('blank').then(() => {
  this.router.navigateByUrl('home/(mapps:mobil//sw:simil//sf:sales)');
})

回答2:

With angular 5 and higher its possible to rerun GuardsAndResolvers

From official documentation

By default they run only when the matrix parameters of the route change. When set to paramsOrQueryParamsChange they will also run when query params change. And when set to always, they will run every time.

{
   path: 'some path',
   runGuardsAndResolvers: 'paramsOrQueryParamsChange'
   ...
}

This should re-run guards and resolvers.

来源：https://stackoverflow.com/questions/41001032/angular2-how-to-refresh-resolver-dependent-components

标签

angular

typescript

angular2-routing