Comment obtenir l'itinéraire actuel

Les documents actuels ne parlent que de l'obtention des paramètres d'itinéraire, pas des segments d'itinéraire réels.

Par exemple, si je veux trouver le parent de l'itinéraire actuel, comment est-ce possible?

Le nouveau routeur V3 a une propriété url.

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

RC4 angulaire:

Vous pouvez importer Routerde@angular/router

Ensuite, injectez-le:

constructor(private router: Router ) {

}

Appelez ensuite son paramètre URL:

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

Injectez Locationdans votre composant et lisez location.path(); Vous devez ajouter ROUTER_DIRECTIVESquelque part pour que Angular puisse résoudre Location. Vous devez ajouter import: [RouterModule]au module.

Mise à jour

Dans le routeur V3 (RC.3), vous pouvez injecter ActivatedRouteet accéder à plus de détails en utilisant sa snapshotpropriété.

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

ou

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

Voir aussi Écouteur d'événement de routeur Angular 2

pour nouveau routeur> = RC.3

Le meilleur et un moyen simple de le faire est!

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"
}

Utilisez ceci

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

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

Et en main.tsimportation

import 'rxjs/add/operator/filter';

ÉDITER

Manière moderne

import {filter} from 'rxjs/operators';

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

Pour ceux qui le recherchent encore. Sur Angular 2.x, il existe plusieurs façons de le faire.

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
}

Références:

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

Pour obtenir les segments d'itinéraire:

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

constructor( route: ActivatedRoute) {}

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

Vous pouvez essayer avec

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

Des moyens alternatifs

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

window.location.pathname qui donne le nom du chemin.

Pour obtenir de manière fiable l'itinéraire complet actuel, vous pouvez utiliser ce

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

L' windowobjet natif fonctionne également très bien

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

REMARQUE: NE PAS UTILISER CELA DANS LE RENDU CÔTÉ SERVEUR

version courte si vous avez importé un routeur, vous pouvez simplement utiliser quelque chose comme

this.router.url === "/ recherche"

sinon faites ce qui suit

1) Importez le routeur

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

2) Déclarez son entrée dans constructeur

constructor(private router: Router) { }

3) Utilisez sa valeur dans votre fonction

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

@victor answer m'a aidé, c'est la même réponse que lui mais avec un petit détail, car cela pourrait aider quelqu'un

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

Dans Angular2 Rc1, vous pouvez injecter RouteSegment et les passer en méthode naviagte.

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

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

Avec angular 2.2.1 (dans un projet basé sur angular2-webpack-starter) cela fonctionne:

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

Dans le modèle d'AppComponent, vous pouvez utiliser par exemple {{activeUrl}}.

Cette solution est inspirée du code de RouterLinkActive.

angulaire 2 rc2

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

Voici ce qui fonctionne pour moi dans 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"
}

Le dataest un objet et nous avons besoin de la urlpropriété contenue dans cet objet. Nous capturons donc cette valeur dans une variable et nous pouvons également utiliser cette variable dans notre page HTML. Par exemple, je souhaite afficher un div uniquement lorsque l'utilisateur est sur la page d'accueil. Dans ce cas, la valeur URL de mon routeur sera /home. Je peux donc écrire un div de la manière suivante:

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

J'ai eu le même problème avec

this.router.url

J'obtiens l'itinéraire actuel avec les paramètres de requête. Une solution de contournement que j'ai faite utilisait ceci à la place:

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

Pas vraiment une bonne solution, mais utile.

Vous pouvez utiliser ActivatedRoutepour obtenir le routeur actuel

Réponse originale (pour la version RC)

J'ai trouvé une solution sur AngularJS Google Group et c'est si simple!

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

Voici la réponse originale

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

VOIE 1 : Utiliser 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);
    }
}

WAY 2 Window.location comme nous le faisons dans le Javascript, si vous ne voulez pas utiliser le routeur

this.href= window.location.href;

Pour vos besoins, vous pouvez utiliser this.activatedRoute.pathFromRoot.

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

}

Avec l'aide de pathFromRoot, vous pouvez obtenir la liste des URL des parents et vérifier si la partie nécessaire de l'URL correspond à votre condition.

Pour plus d'informations, veuillez consulter cet article http://blog.2muchcoffee.com/getting-current-state-in-angular2-router/ ou installer ng2-router-helper à partir de npm

npm install ng2-router-helper

Pour trouver le parent de l'itinéraire actuel, vous pouvez l'obtenir UrlTreeauprès du routeur, en utilisant des itinéraires relatifs:

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

Ensuite, pour obtenir les segments de la sortie principale:

tree.root.children[PRIMARY_OUTLET].segments;

À partir de maintenant, je reçois mon chemin comme suit -

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

Où routerest une instance deActivatedRoute

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

c'est simple, dans angular 2 il vous suffit d'importer la bibliothèque du routeur comme ceci:

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

Ensuite, dans le constructeur du composant ou du service, vous devez l'instancier comme ceci:

constructor(private _router: Router) {}

Puis dans n'importe quelle partie du code, soit dans une fonction, une méthode, une construction, peu importe:

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

Vous pouvez utiliser dans le fichier .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
      }
    });

cela pourrait être votre réponse, utilisez la méthode params de la route activée pour obtenir le paramètre de l'URL / route que vous souhaitez lire, ci-dessous un extrait de démonstration

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

Si vous devez accéder à l'URL actuelle, vous devez généralement attendre que NavigationEnd ou NavigationStart fasse quelque chose. Si vous venez de vous abonner aux événements du routeur, l'abonnement générera de nombreux événements dans le cycle de vie de l'itinéraire. Utilisez plutôt un opérateur RxJS pour filtrer uniquement l'événement dont vous avez besoin. L'effet secondaire bénéfique de ceci est maintenant que nous avons des types plus stricts!

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

J'étais confronté au problème où j'avais besoin du chemin URL lorsque l'utilisateur navigue dans l'application ou accède à une URL (ou actualise sur une URL spécifique) pour afficher les composants enfants basés sur l'URL.

De plus, je veux un observable qui peut être consommé dans le modèle, donc router.url n'était pas une option. Pas plus que l' abonnement router.events car le routage est déclenché avant l'initialisation du modèle du composant.

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

J'espère que ça aide, bonne chance!