Quelle est la différence entre ActivatedRoute et ActivatedRouteSnapshot dans Angular4 ?

Question

Quelle est la différence entre ActivatedRouteSnapshot y ActivatedRoute dans Angular 4 ? J'ai cru comprendre que ActivatedRouteSnapshot est un enfant de ActivatedRoute , ce qui signifie que ActivatedRoute contient ActivatedRouteSnapshot .

J'ai d'ailleurs essayé de faire une recherche sur Google pour trouver une réponse à cette question, mais je n'ai trouvé aucun des résultats compréhensibles.

Merci de votre attention !

Answer 1

Depuis ActivatedRoute peuvent être réutilisés, ActivatedRouteSnapshot est immuable objet représentant une version particulière de l' ActivatedRoute. Il expose toutes les mêmes propriétés que l' ActivatedRoute comme de simples valeurs, tout en ActivatedRoute les expose comme des observables.

Voici le commentaire dans la mise en œuvre:

export class ActivatedRoute {
  /** The current snapshot of this route */
  snapshot: ActivatedRouteSnapshot;

Si un routeur réutilise un composant et ne crée pas une nouvelle route activée, vous avez deux versions de l' ActivatedRouteSnapshot pour le même ActivatedRoute. Supposons que vous avez la configuration de routage:

path: /segment1/:id,
component: AComponent

Maintenant, vous accédez à:

/segment1/1

Vous aurez le param dans l' activatedRoute.snapshot.params.id comme 1.

Maintenant, vous accédez à:

/segment1/2

Vous aurez le param dans l' activatedRoute.snapshot.params.id comme 2.

Vous pouvez le voir par la mise en œuvre de l'suivantes:

export class AComponent {
  constructor(r: ActivatedRoute) {    
    r.url.subscribe((u) => {
      console.log(r.snapshot.params.id);
    });

Answer 2

Il y a deux façons d'obtenir le paramètre de l'itinéraire.

1. Instantané ( route.snapshot.paramMap.get ). Lisez-le pendant l'init.

Utilisez l'instantané si vous n'avez besoin de la valeur initiale du paramètre qu'une seule fois lors de l'initialisation du composant, et si vous ne vous attendez pas à ce que l'URL change alors que l'utilisateur se trouve toujours sur ce même composant.

• Par exemple, s'ils se trouvent sur un itinéraire produit/2 et que le seul moyen d'accéder au produit/3 est de revenir à l'écran de recherche de produits, puis de cliquer sur le détail d'un produit (en quittant le composant détail, puis en le rouvrant avec un nouveau paramètre d'itinéraire), les utilisateurs de la page d'accueil de la page d'accueil de la page d'accueil de la page d'accueil du site Web.

2. Observable ( route.paramMap.subscribe ). S'y abonner lors de l'init.

Utilisez l'observable s'il est possible que l'itinéraire change alors que l'utilisateur est toujours sur le même composant, et donc que l'initialisation du composant ne soit pas appelée à nouveau, mais que l'observable appelle votre logique souscrite lorsque l'URL a changé.

• Par exemple, si vous êtes sur une route produit/2 et que vous avez un bouton "suivant" pour aller à l'enregistrement id suivant produit/3, l'utilisateur n'a pas quitté/ouvert le composant mais l'URL a reçu un nouveau paramètre.

D'une manière générale, la souscription est la voie la plus sûre si vous n'êtes pas sûr de vous.

Answer 3

L'une des principales différences, qui n'a pas été mise en évidence par les autres réponses, est le fait que ActivatedRoute peut être injecté dans un composant, tandis que ActivatedRouteSnapshot ne peuvent pas.

Comme indiqué dans cette réponse vous accédez ActivatedRouteSnapshot dans un composant en injectant ActivatedRoute puis en accédant à son snapshot comme suit :

constructor(route: ActivatedRoute) { 
  let activatedRouteSnapshot = route.snapshot;
}

D'autre part, en essayant d'injecter des ActivatedRouteSnapshot directement dans le composant entraînera une erreur de ce type :

ERROR Erreur : Uncaught (in promise) : Erreur : StaticInjector StaticInjectorError(Platform : core)[YourComponent -> ActivatedRouteSnapshot] : NullInjectorError : Pas de fournisseur pour ActivatedRouteSnapshot !

Voir aussi la documentation pour ActivatedRoute y ActivatedRouteSnapshot