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

Answer 1

parseTree from Router helps fetching the segments without any knowledge about url structure.

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

Start from here. If you have secondary outlets adjust as required.

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

this could help you:

1. Import Router:

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

2. Signature in the constructor:

   constructor(private _router: Router) {}
   

3. Check the _router events property:

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

Answer 4

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 5

Native javascript will work to split the url into logical parts. Check out the "location" (or window.location) object. For example, using location at the url https://example.com/pathname1/pathname2?queryParam1=1&queryParam2=2 yields

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'

Answer 6

I had a similar requirement, depending on which route I used to get the component I wanted different outcomes.

I found that activatedRoute.routeConfig.path was a great option and made it easy for me to see which route had been used.

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