Monday, 14 September 2020

Angular - Get Route data in app component

I have the following routes configured in app-routing.module.ts

const routes: Routes = [
  {
    path: 'abc/:id', component: AbcComponent, data: { category: 'Public' }
  },
  {
    path: 'xyz/:id/tester/:mapId', component: XyzComponent, data: { category: 'Private' }
  },
  { path: '**', redirectTo: '/page-not-found', pathMatch: 'full'}
]

In app.component.ts I would like to get the category of each Route based on the URL passed:

Ex: going to http://myapp.com/abc/123 should return category as Public going to http://myapp.com/xyz/123/tester/456 should return category as Private

Here is what I have so far:

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

checkRouteAndGetCategory()
{
  this.router.events.pipe(
        filter(event => event instanceof NavigationEnd),
        map(() => this.activatedRoute),
        map(route => {
          while (route.firstChild) route = route.firstChild
          return route
        }),
        filter(route => route.outlet === 'primary'),
        mergeMap(route => route.data)
      ).subscribe(data =>
        console.log('data', data)
      )
}

The above code does not seem to get the right route. Ex: If I am on http://myapp.com/abc/123 page and navigated to http://myapp.com/xyz/123/tester/456, it seems to get the data for http://myapp.com/abc/123 page.



from Angular - Get Route data in app component

No comments:

Post a Comment