CODEWITHSUNDEEP
angularparametersroutes
Rakesh Chand
Rakesh Chand

Reputation: 3113

Query params with multiple slashes in URL

It goes like this...

BASE

Angular 4.2.1
Angular CLI 1.0.3

QUESTION

I have defined a URL route as path: 'shop/:shopId',

I have one shop component. In the shop component I am reading the shopId and passing it to the API. Everything is fine.

BUT

The URLs for shop can be smething like following sometimes

  1. /shop/women
  2. /shop/women/shirts
  3. /shop/men/titan/watches

In the case of #2 and #3 I am not able to get women/shirts and men/titan/watches as shopId.

Note : I don't have any limits on the URL, it can go upto 10 to 15 number of params so defining 10 to 15 routes would be messy.

It goes to another URL with 2, 3 or 4 slaces.

My question is, is it possible to get everything after shop/ as shopId.

If yes, How ?

If no, what could be the solution, should I create separate routes for 2, 3, 4, 5 or 6 number of params ?

Upvotes: 0

Views: 2526

Answers (1)

rajit
rajit

Reputation: 154

This is your route

{
    path: 'shop',
    component: ShopParentComponent,
    children : [{
        path: '**',
        component: ShopComponent
    }]
}

I have defined shop as parent route and defined a ** child route to it. Child are using ShopComponent as component and Parent is using ShopParentComponent.

IN your ShopComponent constructor I am detecting changes in url using

_router.events.subscribe((val) => {
    console.log(val);
    if(val instanceof NavigationEnd) {
        var url = this._router.url;
        //do anything with url
    }
});

imported routes like this

import { Router, ActivatedRoute, ParamMap, NavigationStart, NavigationEnd } from '@angular/router';

This will get you the current route

For example in case of this route

http://localhost/shop/a/b/c/d

it will give you

/shop/a/b/c/d

You can easily manipulate this url for your use.

Wondering what does your parent component holds, just one 

<router-outlet></router-outlet>

Upvotes: 1

Related Questions