CODEWITHSUNDEEP
angulartypescriptangular-routingangular-routerlink
VR1256
VR1256

Reputation: 1450

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

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];

image

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
                    }]
            }]
    }]

Upvotes: 3

Views: 11332

Answers (3)

khush
khush

Reputation: 2801

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.

Upvotes: 0

Heehaaw
Heehaaw

Reputation: 2817

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 :-)

Upvotes: 1

Guerric P
Guerric P

Reputation: 31805

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.

Upvotes: 1

Related Questions