0

Si por ejemplo voy al detalle de un registro en un listado y luego vuelvo atrás, necesito saber diferenciar si entré a la página del listado por primera vez o ha sido un "volver atrás" desde el detalle de un registro. Sé que al ser un subscribe, es lógico que siga siendo true, pero necesitaría una alternativa a esto.


private otherPage = true;

ngOnInit() {
   
    this.router.events
         .pipe(
              filter((evt: any) => evt instanceof RoutesRecognized),
              pairwise()
          )
          .subscribe((events: RoutesRecognized[]) => {
                 this.otherPage = false;   
     });

    console.log(this.otherPage); // Sigue siendo true
}

2 respuestas 2

0

Bienvenido Gustavo!

Si entiendo bien, te estás suscribiendo a los eventos del router en el mismo componente que estás queriendo conocer el valor, por lo que no te va a valer (empieza a "escuchar" en ese momento, por lo que lo que haya pasado antes no tiene ni idea)

En los proyectos que hago en Angular suelo usar un servicio para conocer en un componente la ruta de donde viene. Éste empieza a funcionar en el momento que alguien empieza a navegar por la aplicación. A ver si te puede servir:

url.service.ts

import { Injectable } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';

@Injectable({
  providedIn: 'root'
})
export class UrlService {

  private previousUrl: string;
  private currentUrl: string;

  constructor(private router: Router) {
    this.currentUrl = this.router.url;
    router.events.subscribe(event => {
      if (event instanceof NavigationEnd) {
        this.previousUrl = this.currentUrl;
        this.currentUrl = event.url;
      };
    });
  }

  public getPreviousUrl() {
    return this.previousUrl;
  }
}

Lo que hace es que se suscribe a los eventos de router, y cada vez que hay un NavigationEndactualiza las variables del servicio. Y una función para recuperar el valor de la url previa.

Y luego, en el componente que quieras saber la ruta anterior haces algo como esto (si lo que te devuelve está función es un valor null es que viene de recarga o es la primera vez que entra en una página de tu dominio):

comosellametucomponente.component.ts

private otherPage = true;

constructor(private urlService: UrlService) {}

ngOnInit() {
   
    if (this.urlService.getPreviousUrl()) {
       this.otherPage = true;
    } else {
       this.otherPage = false;
    }

    console.log(this.otherPage);
}

A ver si te puede valer

2
  • Muchas gracias msalinas!! Escribo respuesta más arriba para que veas cómo lo solucioné finalmente! Commented el 14 ene. 2022 a las 8:37
  • Bueno, me alegro de que te haya servido de ayuda 😊. Saludos!
    – msalinas
    Commented el 14 ene. 2022 a las 8:53
0

La respuesta de msalinas me ha ayudado mucho, pero no me daba null a la hora de recargar la página o venir desde otra url. Lo que hice fue lo siguiente y con esto sí parece que me está funcionando correctamente:

import { Injectable } from '@angular/core';
import { NavigationEnd, Router, RoutesRecognized } from '@angular/router';
import { filter, pairwise } from 'rxjs';

@Injectable({
    providedIn: 'root',
})
export class UrlService {
    public isPreviousUrl: boolean = false;

    constructor(private router: Router) {
        this.isPreviousUrl = false;
        this.router.events
            .pipe(
                filter((evt: any) => evt instanceof RoutesRecognized),
                pairwise()
            )
            .subscribe((events: RoutesRecognized[]) => {
                this.isPreviousUrl = true;
            });
    }
}

Ya ya luego en el componente hago la comprobación:

 if (this.urlService.isPreviousUrl) { // hago una cosa} else { // hago la otra}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.