Angular 角度-在应用程序组件中获取路线数据

我在

app routing.module.ts中配置了以下路由

const routes:routes=[
{
路径：“abc/：id”，组件：AbcComponent，数据：{category:'Public'}
},
{
路径：“xyz/：id/tester/：mapId”，组件：XyzComponent，数据：{category:'Private'}
},
{路径：'**'，重定向到：'/page not found'，路径匹配：'full'}
]

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

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

以下是我到目前为止的情况：

构造函数(
私有激活路由：激活路由，
专用路由器
)
{
checkRouteAndGetCategory（）
}
checkRouteAndGetCategory（）
{
此为.router.events.pipe(
过滤器（事件=>NavigationEnd的事件实例），
映射（（）=>this.activatedRoute），
地图（路线=>{
while（route.firstChild）route=route.firstChild
回程
}),
过滤器（route=>route.outlet==='primary'），
mergeMap（route=>route.data）
).订阅（数据=>
console.log（'data'，data）
)
}

上面的代码似乎没有得到正确的路径。例：如果我在
http://myapp.com/abc/123
页面并导航到
http://myapp.com/xyz/123/tester/456
，它似乎获得了
http://myapp.com/abc/123
page.
这是我的应用程序组件中的内容

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

我的应用程序路径如下所示：

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

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

我看到的我的和你的唯一区别是，你在构造函数中绑定到路由器，我在
ngOnInit
中绑定。你能试着调用你在ngOnInit中拥有的吗？我不确定这是否会产生影响，但值得一试。
这是一种在组件中获取路由数据的简单方法

constructor(router:Router, route:ActivatedRoute) {
    router.events
      .filter(e => e instanceof NavigationEnd)
      .forEach(e => {
        this.title = route.root.firstChild.snapshot.data.category;
    });
} 

<>我会考虑把这个移动到一个服务上，比如说代码>分类服务< /代码> 

类别服务

import { Injectable } from '@angular/core';
import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
import { filter, map, mergeMap } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class CategoryService {
  constructor(private router: Router ) { }
  private routerEvents =  this.router.events;
  private navigationEndEvent = this.routerEvents
    .pipe(filter(event => event instanceof NavigationEnd))
  category$ = this.navigationEndEvent
    .pipe(
      mergeMap(() => this.rootRoute(this.router.routerState.root).data),
      map(({category}: any) => category)
    )
  private rootRoute = (route: ActivatedRoute): ActivatedRoute => {
    return route.firstChild ? this.rootRoute(route.firstChild) : route;
  }
}

组成部分

constructor(private categoryService: CategoryService) {
  }
  category$ = this.categoryService.category$;
  ...
}

HTML

{{category$| async}

我们的injected
ActivatedRoute确实有不同的名称。我还认为我们的两种方法都做了相同的事情——它们只是在不同的地方被调用。如果你的在ngOnInit仍然不起作用，那么我不知道发生了什么。下一步是在stackblitz中重新创建。我发布了赏金，我认为这个答案很好，看看是否有更简单的代码，很多人有不同的答案，this.title=route.root.firstChild.snapshot.data['PageName']；等
<span>{{ category$ | async }}</span>