example - ¿Cuál es la diferencia entre ActivatedRoute y ActivatedRouteSnapshot en Angular4?

angular router

Question

¿Cuál es la diferencia entre ActivatedRouteSnapshot y ActivatedRoute en Angular 4? Tengo entendido que ActivatedRouteSnapshot es un hijo de ActivatedRoute , lo que significa que ActivatedRoute contiene ActivatedRouteSnapshot .

Por cierto, traté de realizar una búsqueda en Google para obtener una respuesta a esta pregunta, pero no encontré ninguno de los resultados de búsqueda que sean comprensibles.

¡Gracias!

Answer 1

Dado que ActivatedRoute se puede reutilizar , ActivatedRouteSnapshot es un objeto inmutable que representa una versión particular de ActivatedRoute . Expone todas las mismas propiedades que ActivatedRoute como valores simples, mientras que ActivatedRoute expone como observables.

Aquí está el comentario en la implementación:

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

Si un enrutador reutiliza un componente y no crea una nueva ruta activada, tendrá dos versiones de ActivatedRouteSnapshot para el mismo ActivatedRoute . Supongamos que tiene la siguiente configuración de enrutamiento:

path: /segment1/:id,
component: AComponent

Ahora navega a:

/segment1/1

Tendrá el parámetro en enabledRoute.snapshot.params.id como 1 .

Ahora navega a:

/segment1/2

Tendrá el parámetro en enabledRoute.snapshot.params.id como 2 .

Puedes verlo implementando lo siguiente:

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

Answer 2

Hay 2 formas de obtener el parámetro de la ruta.

1. Instantánea ( route.snapshot.paramMap.get ). Léelo durante el ctor.

Use la instantánea si solo necesita el valor inicial del parámetro una vez durante el constructor / init del componente, y no espere que la URL cambie mientras el usuario aún esté en ese mismo componente.

• Es decir, si está en una ruta de producto / 2, y la única forma en que llegarían al producto / 3 es volver a la pantalla de búsqueda de productos y luego hacer clic en el detalle del producto (dejando el componente de detalle, luego volviendo a abrirlo con un nuevo ruta param)

2. Observable ( route.paramMap.subscribe ). Suscríbete durante el ctor.

Use el Observable si es posible que la ruta cambie mientras el usuario aún está en el mismo componente, y por lo tanto, no se volverá a llamar al constructor / init del Componente, pero el observable llamará a su lógica suscrita cuando cambie la URL.

• Es decir, si en la página de detalles de su producto tiene un botón "siguiente" para ir a la siguiente ID, el usuario no dejó / volvió a abrir el componente, pero la URL recibió un nuevo parámetro.