Angular - Get current activated route and re-navigate to the same page with different route param

Question

I am trying to get current route and navigate to the same route after changing the itemCode in the search textbox in the header. When I initially came to the page the parent route is "iauth/iauthedit/1706" then user navigates to the child route "/info", there are several other routes user can navigate from side Navigation bar which is not shown in the image below. When I change the item code to 1853 in the application header as shown in the image, the URL should change to "iauth/iauthedit/1853/info", how can I change the browser URL route param dynamically based on the current route URL on the browser ?, I am trying to find the current activated route which in current scenario parent "iauth/iauthedit/" from the browser URL, so that I can do the navigation

this.router.navigate(['iauth/iauthedit/', 1853];

Below is the current routes:

const itemAuthRoutes: Routes = [
    {
        path: 'iauthedit/:itemCode',
        children: [
            {
                path: '',
                canActivate: [AuthGuard],
                //data: { feature: AppFeature.AuthorizedItem },
                component: ItemAuthorizationEditComponent,
                children: [
                    {
                        path: 'info', component: ItemAuthorizationInfoEditComponent
                    }]
            }]
    }]

Do you want to remove the /info from the route ? – Ramakanth Reddy Feb 07 '19 at 09:21 — Ramakanth Reddy, Feb 07 '19 at 09:21

score 1 · Answer 1 · answered Feb 01 '19 at 13:14

1

The problem with the provided ActivatedRoute from Angular is that its value depends on the component in which it is injected. Indeed, when you inject ActivatedRoute in a component, the value won't be the full route, but the portion of the route that displayed the component.

That means if you want to retrieve the full URL in the component which contains the "item code" input, you simply can't do it by using the Angular API. So I suggest you to parse the URL by using the native Javascript API, then trigger a navigation with this.router.navigate.

Angular is kinda smart at this point, it won't reload the components and you'll be able to react to the params change by using this.activatedRoute.params.subscribe(...), then load the new data and pass it down to the children via @Input() properties.

answered Feb 01 '19 at 13:14

Guerric P

30,447
6
48
86

I will not be needing route params, I will be needing only current route without params so that I can re-navigate with different parameter. eg: iauth is the module route and iauthedit is the component route with :itemCode as parameter, info is the child route in the iauthedit component. Now if I were to change the parameter and reload the page. I need iauth/iauthedit excluding itemcode paramter and /info child route from the browser url, so that i can navigate as this.router.navigate(['iauth/iauthedit/',1888]); – VR1256 Feb 01 '19 at 14:35
Ok I thought you wanted to keep the `/info` segment. Then you'll be able to achieve it **if the component that holds the "item code" input is `ItemAuthorizationEditComponent`** – Guerric P Feb 01 '19 at 14:39
ok thanks, how do you get current route from the browser URL, this.route.navigate is done somewhere at the application level header, so need to get the current activated route from browser url in this case iauth/iauthedit, – VR1256 Feb 01 '19 at 14:49
Then as I explained you can't do it with Angular. The only way is `document.location.pathname` or similar – Guerric P Feb 01 '19 at 14:52

Heehaaw · Answer 2 · 2019-02-01T14:54:43.120

You can try traversing the routeConfig's path property

constructor(private activatedRoute: ActivatedRoute, private router: Router) {}

navigate(newId: string) {
  let route = this.activatedRoute.snapshot;
  const parts = [];
  while (route) {
    route.routeConfig && route.routeConfig.path && parts.push(route.routeConfig.path);
    route = route.parent;
  }
  // `parts` now contain your route's pieces - do whatever you deem fit with that
  parts[1] = newId; // i.e. replace the part that needs replacing
  this.router.navigate(parts.reverse());
}

Hope this helps a little :-)

score 0 · Answer 3 · answered Feb 06 '19 at 07:18

In my case I required, the routing path i.e. /iauth/iauthedit/:itemCode. So to obtain that, I have used ActivatedRoute and Router which I have injected in my component.

ActivatedRoute object has 'pathFromRoot' array whose last element of array contains router config path in 'routerConfig' with paramater value (i.e.iauthedit/:itemCode) which is then merged to form full router config path.

As you need full route path without route params, you can use string operation to fetch the path before route params as below

    constructor(private router: Router, private route: ActivatedRoute) {
        let url = this.router.url;
        const index = this.router.url.lastIndexOf(this.route.pathFromRoot[this.route.pathFromRoot.length - 1].routeConfig.path.split('/')[0]);    
        url = this.router.url.substring(0, index) + this.route.pathFromRoot[this.route.pathFromRoot.length - 1].routeConfig.path;
        console.log(this.router.url) //  /iauth/iauthedit/1853
        console.log(url) // /iauth/iauthedit/:itemCode
        let yourRequiredUrl = url.split(':')[0]  // /iauth/iauthedit/
}

Hope this helps.

Angular - Get current activated route and re-navigate to the same page with different route param

3 Answers3