web-dev-qa-db-fra.com

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

Quelle est la différence entre ActivatedRouteSnapshot et ActivatedRoute dans Angular 4? Je crois comprendre que ActivatedRouteSnapshot est un enfant de ActivatedRoute, ce qui signifie que ActivatedRoute contient ActivatedRouteSnapshot.

Incidemment, j'ai essayé de lancer une recherche sur Google pour trouver une réponse à cette question, mais je n'ai trouvé aucun des résultats de la recherche compréhensible.

Je vous remercie!

angularangular-routingangular2-router
48
RajnishCoder

Puisque ActivatedRoutepeut être réutilisé , ActivatedRouteSnapshot est un objet immuable représentant une version particulière de ActivatedRoute. Il expose les mêmes propriétés que ActivatedRoute en tant que valeurs simples, tandis que ActivatedRoute les expose en tant qu'observables.

Voici le commentaire dans l'implémentation:

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

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

path: /segment1/:id,
component: AComponent

Maintenant, vous naviguez vers:

/segment1/1

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

Maintenant, vous naviguez vers:

/segment1/2

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

Vous pouvez le voir en implémentant ce qui suit:

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

Il existe 2 manières d'obtenir le paramètre de la route.

1. Instantané (route.snapshot.paramMap.get). Lisez-le pendant 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 ne vous attendez pas à ce que l'URL change pendant que l'utilisateur se trouve toujours sur le même composant.

  • C'est à dire. si le produit/2 est acheminé et que le seul moyen d'accéder au produit/3 est de revenir à l'écran de recherche de produit, puis de cliquer sur un détail du produit (en laissant le composant de détail, puis en le rouvrant avec un nouvel itinéraire. param)

2. Observable (route.paramMap.subscribe). Abonnez-vous pendant init.

Utilisez Observable s'il est possible que la route change alors que l'utilisateur se trouve toujours sur le même composant. L'initialisation du composant ne serait donc pas appelée à nouveau, mais l'observable appellerait votre logique abonnée lorsque l'URL a été modifiée.

  • C'est à dire. si sur un produit/2 route, et que vous avez un bouton "suivant" pour aller au prochain produit d'enregistrement d'enregistrement/3, l'utilisateur n'a donc pas laissé/rouvert le composant mais l'URL a reçu un nouveau paramètre.


En règle générale, l'abonnement est la voie la plus sûre si vous n'êtes pas sûr.

16
Don Cheadle