Get current route without parameters

Question

I need to get my current route without params in Angular 2, I found a way to get the current route with params as follows:

 this.router.url

and then split it:

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

But this looks as workaround, I think there should be better way?

Answer 1

None of these worked for me.

There are many approaches to this, but in this case a guard was in place to stop users going to specific URL's. This worked fine except when URL's had parameters as the passed URL always contained all the parameters.

E.G: myPage/param1/param2

Or: myPage?param1=1&param2=2

In this case I'd want just myPage.

I coded the below, I don't like it, I'm sure it can be improved but haven't found anything else that works so far:

    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 comes from the implementation for CanActivate (or inject Router).

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

Answer 2

In my case I needed to compare the previous route and the new route, when changing only the :id on the url via router.navigate. Since I wanted the path without the different ids, I got the original path of the 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
    }
});

Answer 3

I use locationStrategy like in accept answer but with .split() method. LocationStrategy work perfect in 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];
    }
}

One more things you should carry about is to be sure that your <router-outlet> is properly initialize before you try to get locationStrategy.path(). If <router-outlet> isn't initialize any Angular services can't return URL and query params properly.

To be sure that you location strategy is initialize you can use subscribe method like:

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

But in this case you trigger your function on each router change so you need to protect this case if it's unwanted.