Angular-在应用程序组件中获取路线数据 [英] Angular - Get Route data in app component

问题描述

我在 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'}
]

在 app.component.ts 中，我想根据传递的URL获取每个路线的类别:

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

例如:转到 http://myapp.com/abc/123 时应将类别返回为 Public 转到 http://myapp.com/xyz/123/tester/456 的类别应返回为 Private

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

上面的代码似乎没有正确的路线.例如:如果我在 http://myapp.com/abc/123 页面上，并导航到 http://myapp.com/xyz/123/tester/456 ，似乎可以获取 http://myapp.com/abc/123 页面的数据.

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.

推荐答案

这是我的应用程序组件中的内容

This is what I have in my app component

constructor(private route: ActivatedRoute) {
}

ngOnInit(): void {
  this.router.events.pipe(
    filter(event => event instanceof NavigationEnd),
    map(() => this.rootRoute(this.route)),
    filter((route: ActivatedRoute) => route.outlet === 'primary'),
    mergeMap((route: ActivatedRoute) => route.data)
  ).subscribe((event: {[name: string]: any}) => {
    this.titleService.setRouteTitle(event['title']);
  });
}

private rootRoute(route: ActivatedRoute): ActivatedRoute {
  while (route.firstChild) {
    route = route.firstChild;
  }
  return route;
}

我的应用程序路线如下:

Where my app routes look like:

{ path: 'login', component: LoginComponent, data: { title: 'Login' } }

我的标题服务负责设置标题.

And my title service is responsible for setting the title.

我和您的唯一的区别是您绑定到构造函数中的路由器，而我是在 ngOnInit 中完成的.您可以尝试调用 ngOnInit 中的内容吗?我不确定这是否会有所作为，但值得一试.

The only difference I see between mine and yours is that you bind to the router in your constructor and I do it in ngOnInit. Can you try calling what you have in ngOnInit? I'm not sure if this will make a difference, but it's worth a shot.

这篇关于Angular-在应用程序组件中获取路线数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！