web-dev-qa-db-fra.com

Obtenir l'itinéraire actuel sans paramètres

Je dois obtenir mon itinéraire actuel sans paramètres dans Angular 2, j'ai trouvé un moyen d'obtenir l'itinéraire actuel avec paramètres comme suit:

 this.router.url

et ensuite le scinder:

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

Mais cela ressemble à une solution de contournement, je pense qu'il devrait y avoir une meilleure façon?

angularurlangular2-routingangular2-router
11
Sabri Aziri

parseTree à partir de Router permet d'extraire les segments sans aucune connaissance de la structure des URL.

import { Router } from '@angular/router';
...
constructor(private router: Router) {}
...
const urlTree = this.router.parseUrl(url);
const urlWithoutParams = urlTree.root.children['primary'].segments.map(it => it.path).join('/');

Commencez d'ici. Si vous avez des prises secondaires, ajustez-les au besoin.

20
André Werlang

cela pourrait vous aider:

  1. Importation Routeur:

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

  2. Signature dans le constructeur:

    constructor(private _router: Router) {}

  3. Vérifier la _routeur propriété des événements:

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

J'utilise locationStrategy comme dans accept answer mais avec la méthode .split(). LocationStratégie fonctionne parfaitement dans Angular 4 & Angular 5;

import {LocationStrategy} from '@angular/common';

export class MyService {
    constructor(private locationStrategy: LocationStrategy) {
    }

    public getUrl(filters: FilterConfig[]): void {
        const url = this.locationStrategy.path();
        const urlArray = url.split('?');

        return urlArray[0];
    }
}

Une autre chose à faire est de s’assurer que votre <router-outlet> est correctement initialisé avant d’essayer d’obtenir locationStrategy.path(). Si <router-outlet> n'est pas initialisé, aucun service angulaire ne peut renvoyer correctement l'URL et les paramètres de requête.

Pour être sûr que votre stratégie de localisation est initialisée, vous pouvez utiliser la méthode subscribe comme:

this.router.events.subscribe((evt) => {
...
}

Mais dans ce cas, vous déclenchez votre fonction à chaque changement de routeur, vous devez donc protéger cette casse si elle n’est pas souhaitée.

0
kris_IV

Dans mon cas, je devais comparer l'itinéraire précédent et le nouvel itinéraire lorsque je ne modifiais que le: id de l'URL via router.navigate . Puisque je voulais le chemin sans les différents identifiants, j'ai obtenu le chemin d'origine de la route:

/* 
    Routes = [
        { path: 'main/details/:id', component: DetailComponent }
    ]

    previousRoute = '/main/details/1'
    newRoute      = '/main/details/2'
*/

this.routeSubscription = this.router.events.filter((event) => event instanceof ResolveStart)
                                           .pairwise() // returns previous and current events
                                           .subscribe((ev: [ResolveStart, ResolveStart]) => {

    let sameRoute = ev[0].state.root.firstChild.routeConfig.path == ev[1].state.root.firstChild.routeConfig.path ?
                       ev[0].state.root.firstChild.routeConfig.path : undefiend;
    if (sameRoute) {
        // Same routes, probably different ids 
        console.log(sameRoute) // gives 'main/details/:id'
    } else {
        // Different routes
    }
});
0
StinkyCat

Aucun de ceux-ci n'a fonctionné pour moi.

Il existe de nombreuses approches à cet égard, mais dans ce cas, une protection était en place pour empêcher les utilisateurs d'accéder à des URL spécifiques. Cela fonctionnait bien sauf lorsque les URL avaient des paramètres, car l'URL transmise contenait toujours tous les paramètres.

E.G: myPage/param1/param2

Ou: myPage?param1=1&param2=2

Dans ce cas, je voudrais justemyPage.

J'ai codé le code ci-dessous, je ne l'aime pas, je suis sûr que cela peut être amélioré, mais je n'ai rien trouvé qui fonctionne jusqu'ici:

    let url: string = state.url;
    let urlParams: string[];

    if (url.includes("?")) {
        url = url.substr(0, url.indexOf('?'));
    } else {
        urlParams = route.url.toString().split(';')[0].split(',');

        if (urlParams.length > 1) {
            urlParams.shift(); // Remove first element which is page name

            // Get entire splitting on each param
            let fullUrlSegments: string[] = state.url.split('/');
            // Remove number of params from full URL
            fullUrlSegments = fullUrlSegments.slice(0, fullUrlSegments.length - urlParams.length);

            url = fullUrlSegments.join('/');
        }
    }

    alert(url);

state.url provient de l'implémentation de CanActivate (ou injecter Router).

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) Observable<boolean> { ... }
0
Ricky

Pour obtenir l'itinéraire actuel sans paramètres de requête, vous pouvez utiliser la ligne unique mentionnée ci-dessous . This.router.url.split ('?') [0] 

0
Yanusha Cooray