multiple - router.navigate angular 6

Los parámetros de Angular 2 Activatedroute no funcionan en el servicio o fuera de<router-outlet>

Question

Tengo un problema muy extraño: index.html

<navigation-menu *ngIf="isLoggedIn"></navigation-menu>
<div class="content-wrapper" [ngClass]="{''fullContent'' : !isLoggedIn}">
    <section class="content">
        <router-outlet></router-outlet>            
    </section>
</div>

El menú de navegación es un componente del menú de navegación. En el contenido del enrutador de salida hay un componente llamado "activos".

Lo que hice en el componente activo:

import { ActivatedRoute}from "@angular/router";
constructor(private route: ActivatedRoute){}
public ngOnInit(): void {
    this.route.params.subscribe(params => {
        const id = params["id"];
}

Esto funciona y obtengo los parámetros de mi ruta (que es una especie de "asset /: id).

Ahora intenté lo mismo en mi Componente de menú de navegación (que está "fuera" de la salida del enrutador) y en un servicio global llamado contextservice. El mismo código que el anterior, pero ni siquiera se activa en el cambio de ruta. Si intento obtener una instantánea actual del router

  const strId = this.route.snapshot.params["id"];

después de que se activó el evento NavigationEnd, se obtiene el mismo resultado: strId no está definido porque los parámetros son un objeto vacío.

Solo funciona en mi componente de activos. ¿Funciona según lo previsto o cómo debe manejarse?

Mi intención era desencadenar un evento desde un servicio global (o un componente "global" como el menú de navegación) que escucha todos los cambios de ruta (-params).

Mi única solución sería analizar la url completa después de cada evento de NavigationEnd que, en mi opinión, no es una forma adecuada ... O para manejar el cambio de parámetros en cada componente secundario (en enrutador-salida).

Tal vez tengo un error básico en la comprensión ...

Gracias

Solución de respuesta aceptada:

this.router.events.subscribe(val => {
        if (val instanceof RoutesRecognized) {
            var strId = val.state.root.firstChild.params["id"];
        }});

No te olvides de importar rutas reconocidas desde el enrutador angular!

Answer 1

Aquí hay un servicio angular que hace eso:

import {Injectable}                                                        from ''@angular/core'';
import {ActivatedRoute, NavigationEnd, NavigationExtras, ParamMap, Router} from "@angular/router";
import {RouterExtensions}                                                  from "nativescript-angular/router";
import {NavigationOptions}                                                 from "nativescript-angular/router/ns-location-strategy";
import {Observable}                                                        from "rxjs/Observable";
import {first}                                                             from "rxjs/operators/first";
import {filter}                                                            from "rxjs/operators/filter";
import {map}                                                               from "rxjs/operators/map";
import {switchMap}                                                         from "rxjs/operators/switchMap";
import {unRegisterAndroidOnBack}                                           from "../../utils/view.utils";

@Injectable()
export class RoutingService
    {
        constructor(private routerExtensions: RouterExtensions, private route: ActivatedRoute, private router: Router)
        {
        }
        public getActivatedRouteParameter(paramName: string): Observable<ParamMap>
        {
            return this.router.events.pipe(filter(e => e instanceof NavigationEnd),
                                           map((): ActivatedRoute =>
                                               {
                                                   let route = this.route;
                                                   while (route.firstChild)
                                                       {
                                                           route = route.firstChild;
                                                       }
                                                   return route;
                                               }),
                                           filter((route: ActivatedRoute) => route.outlet === ''primary''),
                                           switchMap((route: ActivatedRoute) => route.paramMap) , first());

        }

.

Answer 2

El componente agregado por el enrutador obtiene el segmento del enrutador ( ActivatedRoute ) pasado, pero en un servicio no hay una ruta activada. Puede suscribirse a router.events y recorrer el árbol de rutas (router.firstChild ... `) para obtener los parámetros de una secuencia de ruta específica que necesita.

Consulte también https://github.com/angular/angular/issues/11023

Answer 3

En realidad, tu actividad activada está correcta y actualizada, pero tienes todo el árbol en eso. así que si vas todo el camino dentro de route.firstChild, finalmente encontrarás la última ruta, a la que llamé deepActivatedRoute (dentro de route.firstChild ... route.firstChild)

Entonces, lo que hice fue crear un servicio para rastrear el deepRoute, y tenerlo siempre accesible

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

@Injectable()
export class ActivatedRouteService {
  private _deeperActivatedRoute: ActivatedRoute;
  get deeperActivatedRoute(): ActivatedRoute {
    return this._deeperActivatedRoute;
  }

  constructor(private router: Router, private route: ActivatedRoute) {}

  init(): void {
    this.router.events.subscribe(event => {
      if (event instanceof NavigationEnd) {
        // Traverse the active route tree
        let activatedChild = this.route.firstChild;
        if (activatedChild != null) {
          let nextActivatedChild;
          while (nextActivatedChild != null) {
            nextActivatedChild = activatedChild.firstChild;
            if (nextActivatedChild != null) {
              activatedChild = activatedChild.firstChild;
            }
          }
        }

        this._deeperActivatedRoute = activatedChild || this.route;
      }
    });
  }
}

Luego, en app.component.ts, comienzo el servicio (solo para asegurar que siempre esté siguiendo)

export class AppComponent {
  constructor(private activatedRouteService: ActivatedRouteService) {
    this.activatedRouteService.init();
  }
}

Y finalmente, tome su ruta donde sea que esté:

export class ForbiddenInterceptor implements HttpInterceptor {
  constructor(private activatedRouteService: ActivatedRouteService) { }

  doYourStuff(): void {
       //you''ll have the correct activatedRoute here
       this.activatedRouteService.deeperActivatedRoute;
  }
}

Respondiendo a la pregunta, solo puede tomar la función deepActivatedRoute y comprobar normalmente snapshop.url, tal como lo haría en un componente