Comment obtenir l'itinéraire actuel

472

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?

pdeva
la source
25
window.location.pathname
dchacke
1
@dchacke le problème window.locationest que si à l'avenir, ils veulent implémenter le rendu côté serveur, ils rencontreront des difficultés car ils windown'existent pas sur le serveur Node.js, mais ils doivent utiliser les méthodes standard angulaires pour accéder à la route et ils iront bien sur le serveur et le navigateur.
Mohammad Kermani
Oui, c'est logique. Ceux qui utilisent ou envisagent d'utiliser le rendu côté serveur doivent en tenir compte.
dchacke

Réponses:

523

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

this.router.url === '/login'
Victor96
la source
5
J'utilise ce code et j'obtiens cette URL dans une variable de chaîne, mais lorsque j'essaie d'imprimer dans la console .log, il n'imprime pas this.fullUrl = this.router.url console.log (this.fullUrl); // pas d'impression
vijay gupta
3
Regardez l'utilisation de la nouvelle fonctionnalité active du routeur <a routerLink="/dashboard" routerLinkActive="active"> Dashboard </a>
Victor96
34
cela est inutile lorsque vous naviguez avec la stratégie de hachage, l'url est toujours "/"
Ninja Coding
5
@NinjaCoding J'utilise la stratégie Hash et je reçois juste "/". Comment obtenir l'URL de l'itinéraire avec Hash?
Murtuza
9
@Murtuza est une solution ici: this.router.events.filter((event: any) => event instanceof NavigationEnd).subscribe(event => { console.log('this is what your looking for ', event.url); });. Assurez-vous d'importerimport { Router, NavigationEnd } from '@angular/router';
Gel
161

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
lowcrawler
la source
2
La clarté supplémentaire sur la façon d'importer le routeur lui-même est très utile. Pourriez-vous préciser si ce serait différent si vous utilisiez un routeur personnalisé?
kbpontius
1
Cela dépendrait certainement de la «personnalisation» du routeur personnalisé. (désolé, ce n'était pas un commentaire particulièrement utile - si vous avez une question spécifique, je vous suggère de poser une nouvelle question et de référencer cette réponse)
lowcrawler
42
J'ai utilisé cette solution, mais j'obtiens toujours ce "/". Quelqu'un sait-il pourquoi?
Marcio M.
4
L'injection de dépendance angulaire repose sur la syntaxe de sucre TypeScript, donc lorsque vous déclarez private _router: Router dans la signature du constructeur, une propriété _router est automatiquement créée dans l'instance de classe actuelle avec le routeur injecté. Cette instruction this.router = _router; est juste une surcharge pour moi, car vous auriez deux références à la même instance d'objet (dans ce cas, le routeur).
Andrew Reborn
1
@Marcio M. Cela peut être dû au fait que le routeur n'a pas réellement atteint cet état, même si l'URL est différente. Par exemple, si vous regardez le router.url dans un service de garde. location.path () comme mentionné dans les réponses vous donnera l'url, quel que soit l'état du routeur.
Daniel van Niekerk
61

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

Günter Zöchbauer
la source
3
qui me donne le chemin "url". comment trouver les «noms de route» afin de pouvoir les transmettre dans un tableau à la navigateméthode avec le nom (ajouté) de la route enfant vers laquelle je veux naviguer.
pdeva
Je vois. Je ne trouve pas non plus cela satisfaisant. Je ne l'ai pas essayé moi-même mais peut-être que l' MyTrackingServiceexpliqué dans stackoverflow.com/a/34548656/217408 permettrait d'accéder à ces valeurs.
Günter Zöchbauer
Les noms de route ont disparu.
Günter Zöchbauer
4
@GunterZochbauer existe-t-il un moyen d'obtenir l' itinéraire demandé avant son activation? Par exemple, si je veux enregistrer la demande à l' intérieur de la route d'une canActivate()méthode, afin que je puisse rediriger vers une page « connexion », puis rediriger retour à l'itinéraire initial après les authentifie utilisateur?
Yevgeny Ananin
1
Vous ne pouvez pas faire ça avec un garde canActivate?
Günter Zöchbauer
42

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"
}
Rajath MS
la source
En quoi cette réponse diffère-t-elle de celle de lowcrawler?
not2savvy
1
@ not2savvy avait donné une autre façon de le découvrir via l'écouteur d'événements de routeur, ce qui a aidé certaines personnes à trouver ce qu'elles recherchaient.
Rajath MS
36

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);
    });
Vlad
la source
11
Est-ce vraiment la façon recommandée de faire quelque chose d'aussi simple que de vérifier où pointe l'URL actuelle? Je ne discute pas contre toi sur celui-ci. Cependant, j'ai remarqué que le routage est une source de nombreux changements, mises à jour, confusions, etc. Je m'attendais à ce que ActivatedRoute soit utilisé principalement pour cela, pas pour le routeur . Suis-je en train de manquer la complexité du problème?
DonkeyBanana
Je fais référence à ActivatedRoute dans les documents officiels.
DonkeyBanana
1
Pas besoin d'en avoir au moins ici, le routeur exporte le type "RouterEvent" qui est étendu par les autres événements du routeur - angular.io/api/router/RouterEvent
chrismarx
1
@chrismarx fixed
Vlad
@DonkeyBanana En fait, si vous traitez avec des modules imbriqués qui contiennent leurs propres routes, alors oui. En fait, en utilisant des modules et des routeurs imbriqués (ce que recommande même l'équipe angulaire), c'est le seul moyen d'obtenir l'URL réelle de l'itinéraire actuel, toutes les autres méthodes reviendront simplement /.
Eagerestwolf
32

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
n4nd0_o
la source
27

Pour obtenir les segments d'itinéraire:

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

constructor( route: ActivatedRoute) {}

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

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.

Jose G Varanam
la source
update: enabledRoute.snapshot.url est désormais observable et vous devez vous y abonner.
Sadok Mtir
12

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);
    }
  }
);
Andrei Diaconescu
la source
9

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

Sanket Berde
la source
1
Soyez prudent si vous utilisez le rendu côté serveur, cela cassera.
Jason Foglia
7

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

Mateen
la source
6
import { Router } from '@angular/router';
constructor(router: Router) { 
      console.log(router.routerState.snapshot.url);
}
Carboniser
la source
5

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)
  }
Arpit Agarwal
la source
5

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.

adrhc
la source
c'est une bonne réponse b / c si vous avez un itinéraire générique qui redirige vers / home event.url ne suffit pas pour correspondre à l'itinéraire / home, il affichera en fait l'itinéraire qui n'existe pas. event.urlAfterRedirects imprimera l'itinéraire de fin réel. ty.
Ian Poston Framer du
4

angulaire 2 rc2

router.urlTree.contains(router.createUrlTree(['/home']))
Nadav
la source
4

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>
Devner
la source
4

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.

Ant T.
la source
4

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

Khaled Al-Ansari
la source
A été modifié à partir de rc.2, comme urlmaintenant n'est plus l'URL et une chaîne, mais a ComponentInstruction.
Martin C.
4

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;
Trilok Pathak
la source
3

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
Дмитрий Мельниченко
la source
3

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;
pixelbits
la source
3

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

routerest une instance deActivatedRoute

Tushar Walzade
la source
3

router.events.subscribe(e => {
      if (e instanceof NavigationEnd) {
        this.currentUrl = e.url;
      }
    });

Manoj Manu M
la source
3
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);
    }
});
Hamza
la source
2

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
            }); 
eberlast
la source
2

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
      }
    });
Chirag
la source
1

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'];
        });
    }
}
Vinod
la source
1
this.router.events.subscribe((val) => {
   const currentPage = this.router.url; // Current page route
  const currentLocation = (this.platformLocation as any).location.href; // Current page url
});
Shanil Sasikumar
la source
1

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

codescholar
la source
1

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!

Andrew Radulescu
la source
1
C'est génial.
codeepic