Estoy enrutando de un componente a otro. Una vez hecha la ruta, me gustaría usar la URL de la ruta anterior. He puesto el siguiente código en el constructor del componente al que se está enrutando, pero no se activa en la primera ruta. Después de la primera ruta, la función se dispara cada vez.
this.router.events .filter(e => e instanceof NavigationEnd) .pairwise().subscribe((e) => { console.log(e); });Si elimino la función por pares, parece que se activa en la primera ruta, sin embargo, solo muestra la ruta actual, no la ruta anterior.
router.events .filter(e => e instanceof NavigationEnd) .subscribe(e => { console.log(e); });Mi objetivo es recuperar la ruta anterior cuando se enruta el nuevo componente. ¿Qué estoy haciendo mal aquí?
Como veo, todas estas soluciones se transmiten a route.snapshot y trato de combinar la acción NavigationEnd con ella. Pero si intenta acceder a la página, no se activa con el primer NavigationEnd de router.events . Además, la instantánea activa la ruta principal, no una ruta secundaria. entonces, primero podría usar la ruta secundaria, pero tampoco se disparará como primero ...
this.router.events.pipe( filter((event) => event instanceof NavigationEnd), map(() => this.aRoute.snapshot), map((route) => { while (route.firstChild) { route = route.firstChild; } return route; }) ) así que la MEJOR solución para mí con el primer disparo en la ruta actual adecuada es usar router.events + router.url con un tipo NavigationEnd :
this.router.events .pipe( filter((event) => event instanceof NavigationEnd), startWith(this.router) ) .subscribe((event: NavigationEnd) => { // there will be first router.url - and next - router events })La respuesta ya se dio: el evento NavigationEnd ya se generó cuando el componente se registra para él. No me gusta la idea de "Dimitar Tachev" de crear una solución mediante la transmisión de esos eventos a través de un sujeto. En mi caso la solución fue:
Component se suscriba al evento NavigationEnd como antes.Component cargue el estado inicial del objeto de Route inyectado en el método ngOnInit .Y finalmente, otra solución es mover la suscripción a los eventos de cambio de ruta al constructor del componente.
Tuve exactamente el mismo escenario y descubrí que es demasiado tarde para suscribirse a NavigationEnd con pares en el constructor del componente secundario.
Puede suscribirse al enrutador en su componente raíz y compartir los datos de la ruta a través de un servicio como el siguiente ejemplo:
eventos.servicio.ts
import { Injectable } from '@angular/core'; import { RouteChanged } from '../models/route-changed.model'; import { BehaviorSubject } from 'rxjs/BehaviorSubject'; @Injectable() export class EventsService { public routeChanged = new BehaviorSubject<RouteChanged>({ prevRoute: '/', currentRoute: '/' }); constructor() { } }app.component.ts (su componente raíz)
... @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent implements OnInit, OnDestroy { private subscriptions = new Subscription(); constructor(private eventsService: EventsService) { this.subscriptions.add(this.router.events .filter(event => event instanceof NavigationEnd) .pairwise() .subscribe(navigationEvents => { const prevPage = <NavigationEnd>navigationEvents[0]; const currentPage = <NavigationEnd>navigationEvents[1]; this.eventsService.routeChanged.next( { prevRoute: prevPage.urlAfterRedirects, currentRoute: currentPage.urlAfterRedirects }); })); } ngOnDestroy(): void { this.subscriptions.unsubscribe(); } ... }su-target-route.ts
... constructor(private eventsService: EventsService) { this.subscriptions.add(this.eventsService.routeChanged.subscribe((routeChanged) => { // use routeChanged.prevRoute and routeChanged.currentRoute here... })); }PD: es importante usar un BehaviorSubject o un ReplaySubject en el servicio para obtener el evento de ruta anterior adecuado si su componente secundario se suscribe después de cargar la página.