Question Angular2 transmettre des données de la garde CanActivate à Resolve resolver?


J'ai eu recours à un Resolve pour pré-charger certaines données d'une source distante via un appel HTTP avant de naviguer vers un composant. Maintenant, je dois implémenter une logique de garde qui nécessite, en fonction de certaines conditions, que les données soient préchargées pour vérifier certains champs sur l'utilisateur actuel.

Je voudrais éviter de faire exactement la même demande au backend dans le CanActivate garde et ensuite immédiatement après dans le Resolve.

Y a-t-il un moyen d'accéder aux données de l'itinéraire depuis l'intérieur CanActivate ou la route config pour remplacer temporairement le résolveur et simplement définir la valeur sur l'objet de données puisque j'ai ce que je suis sur le point de demander?

J'ai essayé de partir avec quelque chose d'aussi simple que

route.data['myData'] = value;

Mais c'est une erreur car "l'objet n'est pas extensible".

J'ai aussi essayé quelque chose comme:

this.router.routerState.root.data['myData'] = value;

Qui n'a pas créé d'erreurs, cependant les données n'ont pas survécu dans le route.data élément du Resolve.resolve() méthode.

Je voudrais éviter quelque chose de trop personnalisé ou de piratage comme le stockage temporaire de l'objet sur le Service comme une sorte de cache. Existe-t-il un mécanisme standard de transfert de données entre des éléments de routeur internes pour prendre en charge la pré-extraction avancée et des éléments tels que les contrôles de propriété des données?

MODIFIER Le routerState fonctionne si vous injectez le routeur dans le constructeur du Resolve classe, et y accéder de la même manière. Mais cela doit être effacé par la suite sinon il persiste entre les appels de navigation.


12
2018-05-18 16:48


origine


Réponses:


La propriété data d'un ActivatedRouteSnapshot est immuable, c'est la raison pour laquelle vous recevez l'erreur:

l'objet n'est pas extensible

Mais vous pouvez remplacer l'objet entier, comme ça:

@Injectable()
export class MyGuard implements CanActivate {
  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {

    // Use the spread operator to keep the previously resolved data
    next.data = {...next.data, guardedData: 'guarded'};
    return true;
  }
}

Et y accéder dans votre résolveur

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

  resolve(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<any>|Promise<any>|any {
    return route.data.guardedData;
  }

}

0
2018-03-04 21:02