webentwicklung-frage-antwort-db.com.de

Aktuelle Route ohne Parameter abrufen

Ich muss meine aktuelle Route ohne Params in Angular 2 abrufen. Ich habe einen Weg gefunden, die aktuelle Route mit Params wie folgt abzurufen:

 this.router.url

und spaltet es dann auf:

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

Aber das sieht als Workaround aus, ich denke, es sollte einen besseren Weg geben?

11
Sabri Aziri

parseTree aus Router hilft beim Abrufen der Segmente ohne Kenntnis der URL-Struktur.

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('/');

Beginnen Sie von hier. Wenn Sie über sekundäre Auslässe verfügen, passen Sie sie nach Bedarf an.

20
André Werlang

das könnte dir helfen:

  1. Einführen Router:

    import { Router } from '@angular/router';
    
  2. Unterschrift in der konstrukteur:

    constructor(private _router: Router) {}
    
  3. Überprüf den _router Events-Eigenschaft:

    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

Natives Javascript teilt die URL in logische Teile auf. Checken Sie das Objekt "location" (oder window.location) aus. Wenn Sie beispielsweise location unter der URL https://example.com/pathname1/pathname2?queryParam1=1&queryParam2=2 angeben, erhalten Sie

location.Origin === 'https://example.com/pathname1/pathname2'
location.href === 'https://example.com/pathname1/pathname2?queryParam1=1&queryParam2=2'
location.pathname === '/pathname1/pathname2'
location.search === '?queryParam1=1&queryParam2=2'
0
Cameron Burger

Ich verwende locationStrategy wie Accept, aber mit der .split()-Methode. LocationStrategy funktioniert perfekt in Angular 4 und 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];
    }
}

Eine weitere Sache, die Sie bei sich tragen sollten, ist sicherzustellen, dass Ihr <router-outlet> richtig initialisiert ist, bevor Sie locationStrategy.path() erhalten. Wenn <router-outlet> nicht initialisiert wird, können Angular-Dienste URL und Abfrageparameter nicht ordnungsgemäß zurückgeben.

Um sicherzustellen, dass Ihre Standortstrategie initialisiert ist, können Sie die Abonnementmethode wie folgt verwenden:

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

In diesem Fall lösen Sie Ihre Funktion jedoch bei jeder Änderung des Routers aus. Sie müssen diesen Fall schützen, wenn dies unerwünscht ist.

0
kris_IV

In meinem Fall musste ich die vorherige Route und die neue Route vergleichen, wenn ich nur die: id auf der URL über router.navigate ändere. Da ich den Pfad ohne die verschiedenen IDs wollte, erhielt ich den ursprünglichen Pfad der 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

Ich hatte eine ähnliche Anforderung, abhängig davon, auf welcher Route ich die gewünschte Komponente erhalten habe.

Ich habe das gefunden activatedRoute.routeConfig.path war eine großartige Option und machte es mir einfach zu sehen, welche Route benutzt wurde.

constructor(private activatedRoute: ActivatedRoute) {}
ngOnInit() {
  if (this.route.routeConfig.path === 'heroes/:id')
0
Des Horsley

Nichts davon hat für mich gearbeitet.

Es gibt viele Ansätze dafür, aber in diesem Fall war ein Guard vorhanden, um zu verhindern, dass Benutzer bestimmte URLs aufrufen. Dies funktionierte gut, außer wenn URLs Parameter hatten, da die übergebene URL immer alle Parameter enthielt.

E.G: myPage/param1/param2

Oder: myPage?param1=1&param2=2

In diesem Fall möchte ich nurmyPage.

Ich habe das unten codiert, ich mag es nicht, ich bin sicher, dass es verbessert werden kann, aber nichts gefunden hat, was bisher funktioniert:

    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 stammt aus der Implementierung für CanActivate (oder injizieren Router).

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

Um die aktuelle Route ohne Abfrageparameter abzurufen, können Sie die unten erwähnte einzelne Zeile verwenden. 

0
Yanusha Cooray