Eckige 2 - Prüfen Sie die aktuellen active route "name"

Ich glaube, es ist ein Problem mit Scott ' s Antwort, wo er verwendet die ActivatedRoute Konstruktor des service. Diese route wird nicht aktualisiert.

Ich dachte an eine andere Lösung, die möglicherweise peek Ihr Interesse. Es kommt wieder nach unten über die Verwendung der data - Eigenschaft auf den Strecken, aber jetzt mit einem anderen beheben service:

Sind Sie gehen zu müssen, eine RouterConfig wie dieses, wo für jede route, die Sie hinzufügen state: StateResolve und ein Daten-Objekt, das den Zustand name:

const routes: RouterConfig = [{
    path: 'queue/:date/:offset/:type',
    component: BundleListComponent,
    resolve: {
       response: BundleListResolve,
       state: StateResolve
    },
    data: {
       state: 'Bundle'
    },
    ...
]

vergessen Sie nicht, fügen Sie die StateResolve service, um den Anbietern array

Ihre StateResolve service wird in etwa so Aussehen:

@Injectable()
export class StateResolve implements Resolve<string> {

   constructor(private stateService: StateService) {}

   resolve(route: ActivatedRouteSnapshot): string {
       let state: string = route.data['state']
       this.stateService.setState(state);
       return state;
   }
}

Offensichtlich benötigen Sie ein StateService hat die setState Methode, aber ich denke, von hier aus ist es ziemlich selbsterklärend.

Vielleicht mit einem resolve guard ist ein wenig exzentrisch, aber wenn man darüber nachdenkt, die Sie zu lösen versuchen-Daten, bevor Sie die route. In diesem Fall wird der Zustand innerhalb des Daten-variable, so macht es Sinn, die Resolve Zugriff auf die data Eigenschaft

InformationsquelleAutor PierreDuc

name entfernt wurde vor einiger Zeit von Routen, Strecken geben, fügen Sie beliebige Daten

const routes: RouterConfig = [
    {
        path: '',
        redirectTo: '/login',
        pathMatch: 'full',
    },
    {
        path: 'login',
        component: LoginComponent,
        data: {title: 'Login'}
    },
    {
        path: 'home',
        component: HomeComponent,
        data: {title: 'Home'}
    },
    {
        path: 'wepays',
        component: WePaysComponent,
        data: {title: 'WePays'}
    }
];

Dieser code erstellt ein Titel aus dem Namen aller Teilstrecken. Dies könnte wahrscheinlich vereinfacht werden für Ihren Anwendungsfall.

export class AppComponent { 
  constructor(titleService:Title, router:Router, activatedRoute:ActivatedRoute) {
    router.events.subscribe(event => {
      if(event instanceof NavigationEnd) {
        var title = this.getTitle(router.routerState, router.routerState.root).join('-');
        console.log('title', title);
        titleService.setTitle(title);
      }
    });
  }

  //collect that title data properties from all child routes
  //there might be a better way but this worked for me
  getTitle(state, parent) {
    var data = [];
    if(parent && parent.snapshot.data && parent.snapshot.data.title) {
      data.push(parent.snapshot.data.title);
    }

    if(state && parent) {
      data.push(... this.getTitle(state, state.firstChild(parent)));
    }
    return data;
  }
}

Siehe auch Ändern Sie den Titel der Seite mit der Eckigen 2 neue router

InformationsquelleAutor Günter Zöchbauer

meine Antwort ist ähnlich, aber hat einen anderen Weg, so dass ich denke, es ist gut zu posten

Was anders ist: ich brauche nicht zu ändern, alles auf meine Routen, ich habe einen Dienst zu verfolgen, die tiefer ActivatedRoute (innen-oder firstChild...firstChild)

erstellen der service

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;
      }
    });
  }
}

dann in der app.Komponente.ts ich den Dienst starten (nur um sicherzustellen, dass es immer eine tracking)

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

und schließlich, nehmen Sie Ihre route, wo immer service Sie sind:

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

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

Beantwortung der Frage, können Sie einfach den deeperActivatedRoute und überprüfen Sie normalerweise die snapshop.url, so wie du tun würde-in eine Komponente

InformationsquelleAutor LuizAsFight