Come ottenere il percorso corrente

I documenti attuali parlano solo di ottenere parametri di rotta, non i segmenti di rotta effettivi.

Ad esempio, se voglio trovare il genitore del percorso corrente, come è possibile?

Il nuovo router V3 ha una proprietà url.

this.router.url === '/login'

RC4 angolare:

Puoi importare Routerda@angular/router

Quindi iniettalo:

constructor(private router: Router ) {

}

Quindi chiama il parametro URL:

console.log(this.router.url); //  /routename

Iniettare Locationnel componente e leggere location.path(); È necessario aggiungere ROUTER_DIRECTIVESda qualche parte in modo che Angular possa risolversi Location. Devi aggiungere import: [RouterModule]al modulo.

Aggiornare

Nel router V3 (RC.3) è possibile iniettare ActivatedRoutee accedere a maggiori dettagli usando la sua snapshotproprietà.

constructor(private route:ActivatedRoute) {
  console.log(route);
}

o

constructor(private router:Router) {
  router.events.subscribe(...);
}

Vedi anche Listener di eventi del router Angular 2

per nuovo router> = RC.3

Il modo migliore e semplice per farlo è!

import { Router } from '@angular/router';
constructor(router: Router) { 
      router.events.subscribe((url:any) => console.log(url));
      console.log(router.url);  // to print only path eg:"/login"
}

Usa questo

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

constructor(private router: Router) {
    router.events.filter(event => event instanceof NavigationEnd)
        .subscribe(event => {
            console.log(event);
        });
}

E in main.tsimportazione

import 'rxjs/add/operator/filter';

MODIFICARE

Modo moderno

import {filter} from 'rxjs/operators';

router.events.pipe(
    filter(event => event instanceof NavigationEnd)
)
    .subscribe(event => {
        console.log(event);
    });

Per chi lo sta ancora cercando. Su Angular 2.x ci sono alcuni modi per farlo.

constructor(private router: Router, private activatedRoute: ActivatedRoute){

   // string path from root to current route. i.e /Root/CurrentRoute
   router.url 

    // just the fragment of the current route. i.e. CurrentRoute
   activatedRoute.url.value[0].path

    // same as above with urlSegment[]
   activatedRoute.url.subscribe((url: urlSegment[])=> console.log(url[0].path))

   // same as above
   activatedRoute.snapshot.url[0].path

   // the url fragment from the parent route i.e. Root
   // since the parent is an ActivatedRoute object, you can get the same using 
   activatedRoute.parent.url.value[0].path
}

Riferimenti:

1. https://angular.io/docs/ts/latest/api/router/index/ActivatedRoute-interface.html
2. https://angular.io/docs/ts/latest/api/router/index/Router-class.html
3. https://angular.io/docs/ts/latest/guide/router.html

Per ottenere i segmenti di percorso:

import { ActivatedRoute, UrlSegment } from '@angular/router';

constructor( route: ActivatedRoute) {}

getRoutes() { const segments: UrlSegment[] = this.route.snapshot.url; }

Puoi provare con

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

constructor(private router: Router, private activatedRoute:ActivatedRoute) {
console.log(activatedRoute.snapshot.url)  // array of states
console.log(activatedRoute.snapshot.url[0].path) }

Modi alternativi

router.location.path();   this works only in browser console. 

window.location.pathname che dà il nome del percorso.

Per ottenere in modo affidabile l'intero percorso corrente è possibile utilizzare questo

this.router.events.subscribe(
  (event: any) => {
    if (event instanceof NavigationEnd) {
      console.log('this.router.url', this.router.url);
    }
  }
);

Anche l' windowoggetto nativo funziona bene

console.log('URL:' + window.location.href);
console.log('Path:' + window.location.pathname);
console.log('Host:' + window.location.host);
console.log('Hostname:' + window.location.hostname);
console.log('Origin:' + window.location.origin);
console.log('Port:' + window.location.port);
console.log('Search String:' + window.location.search);

NOTA: NON UTILIZZARE QUESTO NEL RENDERING LATERALE DEL SERVER

versione corta se hai importato il router , puoi semplicemente usare qualcosa come

this.router.url === "/ ricerca"

altrimenti fai quanto segue

1) Importa il router

import { Router } from '@angular/router';

2) Dichiarare la sua voce nel costruttore

constructor(private router: Router) { }

3) Usa il suo valore nella tua funzione

yourFunction(){
    if(this.router.url === "/search"){
        //some logic
    }
}

La risposta di @victor mi ha aiutato, questa è la stessa sua risposta ma con un piccolo dettaglio, in quanto potrebbe aiutare qualcuno

import { Router } from '@angular/router';
constructor(router: Router) { 
      console.log(router.routerState.snapshot.url);
}

In Angular2 Rc1 è possibile iniettare RouteSegment e passarli nel metodo naviagte.

constructor(private router:Router,private segment:RouteSegment) {}

  ngOnInit() {
    this.router.navigate(["explore"],this.segment)
  }

Con angular 2.2.1 (in un progetto basato su angular2-webpack-starter) funziona così:

export class AppComponent {
  subscription: Subscription;
  activeUrl: string;

  constructor(public appState: AppState,
              private router: Router) {
    console.log('[app] constructor AppComponent');
  }

  ngOnInit() {
    console.log('[app] ngOnInit');
    let _this = this;
    this.subscription = this.router.events.subscribe(function (s) {
      if (s instanceof NavigationEnd) {
        _this.activeUrl = s.urlAfterRedirects;
      }
    });
  }

  ngOnDestroy() {
    console.log('[app] ngOnDestroy: ');
    this.subscription.unsubscribe();
  }
}

Nel modello di AppComponent è possibile utilizzare ad es. {{ActiveUrl}}.

Questa soluzione è ispirata al codice di RouterLinkActive.

angolare 2 rc2

router.urlTree.contains(router.createUrlTree(['/home']))

Ecco cosa funziona per me in Angular 2.3.1.

location: any;

constructor(private _router: Router) { 

      _router.events.subscribe((data:any) => { this.location = data.url; });

      console.warn(this.location);  // This should print only path e.g. "/home"
}

Il dataè un oggetto e abbiamo bisogno della urlproprietà contenuta in tale oggetto. Quindi acquisiamo quel valore in una variabile e possiamo usare quella variabile anche nella nostra pagina HTML. Ad esempio, voglio mostrare un div solo quando l'utente è nella Home page. In questo caso, sarà il valore dell'URL del mio router /home. Quindi posso scrivere un div nel modo seguente:

<div *ngIf="location == '/home'">
This is content for the home page.
</div>

Ho avuto lo stesso problema usando

this.router.url

Ottengo il percorso corrente con parametri di query. Una soluzione alternativa che ho fatto è stato utilizzare questo invece:

this.router.url.split('?')[0]

Non è una soluzione davvero piacevole, ma utile.

È possibile utilizzare ActivatedRouteper ottenere il router corrente

Risposta originale (per versione RC)

Ho trovato una soluzione su AngularJS Google Group ed è così facile!

ngOnInit() {
  this.router.subscribe((url) => console.log(url));
}

Ecco la risposta originale

https://groups.google.com/d/msg/angular/wn1h0JPrF48/zl1sHJxbCQAJ

MODO 1 : Utilizzo di Angular: this.router.url

import { Component } from '@angular/core';

// Step 1: import the router 
import { Router } from '@angular/router';

@Component({
    template: 'The href is: {{href}}'
    /*
    Other component settings
    */
})
export class Component {
    public href: string = "";

    //Step 2: Declare the same in the constructure.
    constructor(private router: Router) {}

    ngOnInit() {
        this.href = this.router.url;
        // Do comparision here.....
        ///////////////////////////
        console.log(this.router.url);
    }
}

MODO 2 Window.location come facciamo nel Javascript, se non vuoi usare il router

this.href= window.location.href;

Per i tuoi scopi puoi usare this.activatedRoute.pathFromRoot.

import {ActivatedRoute} from "@angular/router";
constructor(public activatedRoute: ActivatedRoute){

}

Con l'aiuto di pathFromRoot puoi ottenere l'elenco degli URL principali e verificare se la parte necessaria dell'URL corrisponde alla tua condizione.

Per ulteriori informazioni, consultare questo articolo http://blog.2muchcoffee.com/getting-current-state-in-angular2-router/ o installare ng2-router-helper da npm

npm install ng2-router-helper

Per trovare il genitore del percorso corrente, è possibile ottenere il UrlTreedal router, utilizzando i percorsi relativi:

var tree:UrlTree = router.createUrlTree(['../'], {relativeTo: route});

Quindi per ottenere i segmenti dell'outlet primario:

tree.root.children[PRIMARY_OUTLET].segments;

A partire da ora, sto ottenendo il mio percorso come segue -

this.router.url.subscribe(value => {
    // you may print value to see the actual object
    // console.log(JSON.stringify(value));
    this.isPreview = value[0].path === 'preview';
})

Dove, router è un'istanza diActivatedRoute

import { Router, NavigationEnd } from "@angular/router";

constructor(private router: Router) {
  // Detect current route
  router.events.subscribe(val => {
    if (val instanceof NavigationEnd) {
      console.log(val.url);
    }
});

questo è semplice, in Angular 2 devi solo importare la libreria Router in questo modo:

import { Router } from '@angular/router';

Quindi nel costruttore del componente o del servizio è necessario creare un'istanza in questo modo:

constructor(private _router: Router) {}

Quindi in qualsiasi parte del codice, in una funzione, metodo, costrutto, qualunque cosa:

      this._router.events
        .subscribe(
            (url:any) => {
                let _ruta = "";
                url.url.split("/").forEach(element => {
                    if(element!=="" && _ruta==="")
                        _ruta="/"+element;  
                });
                console.log("route: "+_ruta); //<<<---- Root path
                console.log("to URL:"+url.url); //<<<---- Destination URL                    
                console.log("from URL:"+this._router.url);//<<<---- Current URL
            }); 

È possibile utilizzare nel file .ts

import { Route, Router, NavigationStart } from '@angular/router';

constructor(private router: Router) {}

this.router.events.subscribe(value => {
      if (value instanceof NavigationStart) {
        console.log(value) // your current route
      }
    });

questa potrebbe essere la tua risposta, usa il metodo params della route attivata per ottenere i parametri dall'URL / route che vuoi leggere, sotto è lo snippet demo

import {ActivatedRoute} from '@angular/router'; 
@Component({
})
export class Test{
constructor(private route: ActivatedRoute){
this.route.params.subscribe(params => {
             this.yourVariable = params['required_param_name'];
        });
    }
}

this.router.events.subscribe((val) => {
   const currentPage = this.router.url; // Current page route
  const currentLocation = (this.platformLocation as any).location.href; // Current page url
});

Se devi accedere all'URL corrente, di solito devi attendere che NavigationEnd o NavigationStart facciano qualcosa. Se ti iscrivi agli eventi del router, l'abbonamento genererà molti eventi nel ciclo di vita del percorso. Invece, usa un operatore RxJS per filtrare solo l'evento che ti serve. L'effetto collaterale benefico di questo è che ora abbiamo tipi più severi!

constructor(private router: Router) {
    router.events.pipe(
      filter(ev => (ev instanceof NavigationEnd))
    ).subscribe((ev: NavigationEnd) => {
      console.log(ev.url);
    });
}

Stavo affrontando il problema in cui avevo bisogno del percorso dell'URL quando l'utente stava navigando nell'app o accedendo a un URL (o aggiornando un URL specifico) per visualizzare i componenti figlio in base all'URL.

Inoltre , voglio un osservabile che può essere consumato nel modello, quindi router.url non era un'opzione. Né abbonamento router.events perché il routing viene attivato prima dell'inizializzazione del modello del componente.

this.currentRouteURL$ = this.router.events.pipe(
     startWith(this.router),
     filter(
         (event) => event instanceof NavigationEnd || event instanceof Router
     ),
     map((event: NavigationEnd | Router) => event.url)
);

Spero che ti aiuti, buona fortuna!