Angular2 @ angular/router 3.0.0-alpha.3 - Come ottenere il nome o il percorso dell'itinerario quando il percorso cambia

Question

Sto cercando di ottenere il nome del percorso corrente o il percorso percorso nel mio app.component quando il percorso cambia in modo tale che Posso usare il nome della rotta come classe di pagina attorno a un div wrapper. Sto cercando di capire il modo migliore per gestire questo. In precedenza stavo sottoscrivendo le proprietà di modifica del router come ho elencato di seguito, ma sembra che questo non sia più disponibile con @ angular/router 3.0.0-alpha.3. Se qualcuno ha qualche pensiero o suggerimento sarei molto grato.

this.router.changes.subscribe((val) => { 
    var path = this._location.path(); 
    if (path.indexOf('page-name') !== -1) { 
    this.pageClass = 'page-name'; 
    } 
}) 

Answer 1

Ciò potrebbe aiutare,

import { CanActivate, Router, RouterStateSnapshot } from '@angular/router'; 

@Component({ 
    selector: 'my-component', 
    templateUrl: 'my-component.html' 
}) 
export class MyComponent implements CanActivate { 
    constructor(private router: Router) {} 

    canActivate(state: RouterStateSnapshot) { 
    // this is the future route you are intended to visit 
    console.log(state.url); 
    } 
} 

Maggiori dettagli a https://angular.io/docs/ts/latest/guide/router.html

Answer 2

risposta di Steve è quello documentato attualmente, ma l'url osservabili sul ActivatedRoute non è sparare per me, tranne quando ho premere l'url di base (es: passando da/index a/index/item funziona, ma passando da/index/item a index/item/2, index/dashboard o even/index no).

Non sono sicuro se la seguente soluzione è una pratica migliore né quali sono le implicazioni di prestazione sono, ma sono stato in grado di ottenere il percorso attivo sulla NavigationEnd evento del router con il seguente:

import { Component, OnInit, OnDestroy } from '@angular/core'; 
import { ROUTER_DIRECTIVES, Router, NavigationEnd } from '@angular/router'; 

@Component({ 
    selector: 'navbar', 
    directives: [ROUTER_DIRECTIVES], 
    template: ` 
       ... 
       `  
}) 

export class NavBarComponent implements OnInit, OnDestroy { 
    private sub: any; 

    constructor(private router: Router) { 
    } 

    ngOnInit() { 
     this.sub = this.router.events.subscribe(e => { 
      if (e instanceof NavigationEnd) { 
       console.log(e.url); 
      } 
     }); 
    } 


    ngOnDestroy() { 
     this.sub.unsubscribe(); 
    } 
} 

Si attiva ogni volta che si modifica il percorso, indipendentemente dalla profondità della struttura o da dove si naviga verso/da.