Comment obtenir l'itinéraire actuel
Les documents actuels ne parlent que de l'obtention des paramètres de route, pas des segments de route réels.
Par exemple, si je veux trouver le parent de la route actuelle, comment est-ce possible?
Le nouveau routeur V3 a une propriété url.
this.router.url === '/login'
RC4 angulaire:
Vous pouvez importer Router à partir de @angular/router
Puis injectez-le:
constructor(private router: Router ) {
}
Appelez ensuite son paramètre d'URL:
console.log(this.router.url); // /routename
Injectez Location dans votre composant et lisez location.path(); Vous devez ajouter Vous devez ajouter ROUTER_DIRECTIVES quelque part pour que Angular puisse résoudre Location.import: [RouterModule] au module.
Mettre à jour
Dans le routeur V3 (RC.3), vous pouvez injecter ActivatedRoute et accéder à plus de détails à l'aide de sa propriété snapshot.
constructor(private route:ActivatedRoute) {
console.log(route);
}
ou
constructor(private router:Router) {
router.events.subscribe(...);
}
Voir aussi écouteur d'événement de routeur angulaire 2
pour le nouveau routeur> = RC.
Le meilleur et simple moyen 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"
}
Pour ceux qui recherchent encore cela. Sur Angular 2.x, il y a 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:
Pour obtenir les segments de route:
import { ActivatedRoute, UrlSegment } from '@angular/router';
constructor( route: ActivatedRoute) {}
getRoutes() { const segments: UrlSegment[] = this.route.snapshot.url; }
Utilisez ceci
import { Router, NavigationEnd } from '@angular/router';
constructor(private router: Router) {
router.events.filter((event: any) => event instanceof NavigationEnd)
.subscribe(event => {
console.log(event);
});
}
Et dans main.ts import
import 'rxjs/add/operator/filter';
EDIT
Manière moderne
import {filter} from 'rxjs/operators';
router.events.pipe(
filter((event: any) => event instanceof NavigationEnd)
)
.subscribe(event => {
console.log(event);
});
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) }
Manières alternatives
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 actuel complet, vous pouvez utiliser cette
this.router.events.subscribe(
(event: any) => {
if (event instanceof NavigationEnd) {
console.log('this.router.url', this.router.url);
}
}
);
L'objet natif window fonctionne bien aussi
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: N'UTILISEZ PAS CELA DANS LE RENDU LATÉRAL DU SERVEUR.
version courte si vous avez routeur importé, vous pouvez simplement utiliser quelque chose comme
this.router.url === "/ search"
sinon faites ce qui suit
1) Importer le routeur
import { Router } from '@angular/router';
2) déclarer son entrée en constructeur
constructor(private router: Router) { }
3) Utilisez sa valeur dans votre fonction
yourFunction(){
if(this.router.url === "/search"){
//some logic
}
}
La réponse de @victor m'a aidé, c'est la même réponse que lui mais avec un peu de détail, car elle pourrait aider quelqu'un
Dans Angular2 Rc1, vous pouvez injecter RouteSegment et les transmettre avec la 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), ceci fonctionne comme suit:
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 AppComponent, vous pouvez utiliser par exemple {{activeUrl}}.
Cette solution est inspirée du code de RouterLinkActive.
Vous pouvez utiliser ActivatedRoute pour 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
J'ai eu le même problème en utilisant
this.router.url
Je reçois la route actuelle avec les paramètres de requête. Une solution de contournement que j'ai utilisée utilisait plutôt ceci:
this.router.url.split('?')[0]
Pas une solution vraiment sympa, mais utile.
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"
}
La data est un objet et nous avons besoin de la propriété url 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 de l'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>
Pour vos besoins, vous pouvez utiliser this.activatedRoute.pathFromRoot.
import {ActivatedRoute} from "@angular/router";
constructor(public activatedRoute: ActivatedRoute){
}
À l'aide de pathFromRoot, vous pouvez obtenir la liste des URL parent et vérifier si la partie requise de l'URL correspond à votre condition.
Pour plus d'informations, consultez cet article http://blog.2muchcoffee.com/getting-current-state-in-angular2-router/ ou installez ng2-router-helper à partir de npm
npm install ng2-router-helper
Pour rechercher le parent de la route en cours, vous pouvez obtenir le UrlTree auprès du routeur, à l'aide de routes relatives:
var tree:UrlTree = router.createUrlTree(['../'], {relativeTo: route});
Ensuite, pour obtenir les segments du point de vente principal:
tree.root.children[PRIMARY_OUTLET].segments;
A partir de maintenant, je suis sur 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ù, router est une instance de ActivatedRoute
WAY 1: Utilisation de 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 en Javascript, si vous ne voulez pas utiliser le routeur
this.href= window.location.href;
c’est simple, dans angular 2, il vous suffit d’importer le Routeur bibliothèque 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) {}
Ensuite, dans n'importe quelle partie du code, que ce 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
});
router.events.subscribe(e => {
if (e instanceof NavigationEnd) {
this.currentUrl = e.url;
}
});J'étais confronté au problème où j'avais besoin du chemin de l'URL lorsque l'utilisateur est navigation dans l'application ou accès à une URL (ou rafraîchissement d'une URL spécifique) pour afficher les composants enfants en fonction sur l'URL.
De plus, je veux un observable pouvant être utilisé dans le modèle, donc router.url n'était pas une option. Ni router.events abonnement 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!
this.router.events.subscribe((val) => {
const currentPage = this.router.url; // Current page route
const currentLocation = (this.platformLocation as any).location.href; // Current page url
});
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 voulez lire. Ci-dessous l'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'];
});
}
}
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
}
});
Si vous devez accéder à l'URL actuelle, vous devez généralement attendre que NavigationEnd ou NavigationStart agisse. Si vous venez de vous abonner aux événements de routeur, l'abonnement générera de nombreux événements dans le cycle de vie de l'itinéraire. Au lieu de cela, utilisez un opérateur RxJS pour filtrer uniquement l'événement dont vous avez besoin. L'effet secondaire bénéfique de ceci est que nous avons maintenant des types plus stricts!
constructor(private router: Router) {
router.events.pipe(
filter(ev => (ev instanceof NavigationEnd))
).subscribe((ev: NavigationEnd) => {
console.log(ev.url);
});
}
dans le fichier de composant:
import {ActivatedRouteSnapshot} from '@angular/router';
constructor(state: ActivatedRouteSnapshot) {
console.log(state.path)
}
dans le fichier de routage:
import {ActivatedRoute} from '@angular/router';
constructor(private route:ActivatedRoute){
console.log(this.route.routeConfig.path);
}