web-dev-qa-db-fra.com

Angular2 Router et plusieurs résolutions dans une route

Dans ui-router, il est facile de faire plusieurs résolutions définies dans la configuration de la route, alors disons quelque chose comme:

export const APP_STATES: Ng2StateDeclaration[] = [
  {
    name: 'dashboard',
    url: '/dashboard', 
    component: DashboardComponent,
    resolve: [
      {
        token: 'playbookDurations',
        deps: [DashboardService],
        resolveFn: (svc: DashboardService) => svc.getPlaybookDurations()
      },
      {
        token: 'playbookSuccesses',
        deps: [DashboardService],
        resolveFn: (svc: DashboardService) => svc.getPlaybookSuccesses()
      },
      {
        token: 'playbookRuns',
        deps: [DashboardService],
        resolveFn: (svc: DashboardService) => svc.getPlaybookRuns()
      },
      {
        token: 'activityLog',
        deps: [DashboardService],
        resolveFn: (svc: DashboardService) => svc.getActivityLog()
      }
    ]
  }
}];

lorsque vous utilisez le routeur Angular2, vous devez implémenter un modèle de résolveur pour le paramètre de résolution. Donc, quelque chose comme ça:

import { Resolve, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { Injectable } from '@angular/core';
import { DashboardService } from '.';

@Injectable()
export class DashboardResolver implements Resolve<any> {

  constructor(private dashboardService: DashboardService) { }

  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    return this.dashboardService.get();
  }

}

alors dans mon parcours je fais quelque chose comme:

import { DashboardComponent } from './dashboard.component';
import { DashboardResolver } from './dashboard.resolver';

export const routes = [
  { 
    path: '', 
    children: [
      {
        path: '', 
        component: DashboardComponent,
        resolve: {
          data: DashboardResolver
        }
      }
    ]
  }
];

le problème est qu'il n'y a qu'une résolution. Comment implémenter plusieurs arguments de résolution comme l'implémentation de ui-router? 

Je suppose que vous avez 2 options; Les résolveurs d'implémentation pour chacune de ces entrées OR ont pour résolution de renvoyer un objet avec toutes vos résolutions imbriquées. Le premier semble assez cérémonieux et le second sonne plutôt malin, il doit donc y avoir un meilleur moyen.

angularangular2-routing
16
amcdnl

D'accord, j'espère ne pas avoir mal compris la question.

Le routeur Angular prend en charge autant de résolveurs que vous le souhaitez par route.

Dans la déclaration de route, la propriété resolve est un objet et peut avoir autant de clés que vous le souhaitez:

{
  path: '', 
  component: DashboardComponent,
  resolve: {
    foo: Resolver1
    bar: Resolver2,
    // more resolves here...
  }
}

Récupérez ensuite les données résolues de votre composant:

@Component({ ... })
export class MyComponent {

  constructor(private route: ActivatedRoute) { }

  ngOnInit() {
    const foo = this.route.snapshot.data['foo'];
    const bar = this.route.snapshot.data['bar'];
  }

}

L'itinéraire ne sera activé que si TOUTES les résolutions sont terminées/accomplies.

28
AngularChef

Vous pouvez obtenir les mêmes résultats en utilisant UNIQUEMENT UN RÉSOLVE:

resolve(route: ActivatedRouteSnapshot,state: RouterStateSnapshot,): Observable<any> {
    let companyIdentifierTypes = this.companiesService.getCompanyIdentifierTypes();
    let mobilePrefixes = this.registrationService.getMobilePrefixes();
    let data = {companyIdentifierTypes: companyIdentifierTypes, mobilePrefixes: mobilePrefixes};
    return Observable.of(data);
}

et récupérez les données résolues de cette façon:

fetchDataBeforeViewRender() {
    let data =  this.route.snapshot.data['data'];
    if(data != null) {
        data.companyIdentifierTypes.subscribe(data => {this.identityTypeIDList = data;});
        data.mobilePrefixes.subscribe(data => {this.mobilePrefixOptions = data;});
    }
}

assurez-vous de nommer le résolveur correctement!

0
Itamar