路线更改时获取路线自定义数据

Question

我正在编写面包屑组件的 angular 12 组件，我知道那里有很多，我想在这里学习一些东西，所以继续吧:)

所以我试图检测路由更改，包括用户打开网站时的第一条路由，我还需要添加我添加到路由的自定义数据。

这意味着我有

      { path: '', component: HomeComponent, data: {breadcrumb: 'home'}}

作为我的路由器之一，当用户浏览到主页时，我会得到一个带有 {breadcrumb: 'home'}

的对象

所以在我的组件的构造函数中我有以下内容：

 constructor(
    private route: ActivatedRoute,
    private router: Router) {
    this.router.events.subscribe((event) => {
    
             if (event instanceof NavigationEnd) {
              const data = this.route.root.snapshot.data;
              const url = event.url;
              console.info('data =>' + JSON.stringify(data));
        ...

数据对象总是空的，我用谷歌搜索了很多答案，这些答案可能与 angular 的以前版本有关，这让我很困惑，但并没有真正做任何事情。

例如我在某处读到我需要检查事件 RoutesRecognized 并且在那里我可以获得数据，所以我添加了

     if (event instanceof RoutesRecognized) {
         let route = event.state.root.firstChild!.data;
         console.info(route);
         console.info('RECOGNIZED');
       }

而且这个事件根本没有被触发，我更喜欢在一个事件中拥有我需要的一切。

我注意到 NavigationStart 在我第一次加载页面时没有触发，只有当我移动到另一条路线时才会触发，所以我使用了 NavigationEnd，所以我得到了 url好吧，我只是没有得到自定义数据。

所以我在这里要做的就是获取 url 和有关 url 更改的自定义数据。有什么想法吗？

Answer 1

好的，所以解决方案很简单..

第一页未在 ActivationStart 加载，因为我将 initialNavigation 设置为 'enabled':

@NgModule({
  imports: [RouterModule.forRoot(routes, {
    initialNavigation: 'enabled',
})],

我真的不需要那个，当我删除那个参数时 ActivationStart 会在第一页加载时执行。

然后我有：

 if (event instanceof ActivationStart) {

        const data = event.snapshot.data;
        const url = event.snapshot.url;

所以我正确地得到了 data 对象并且 url 作为 UrlSegment 数组出现。

我可以通过以下方式轻松获取子路由数据：

    const childUrl = event.snapshot.firstChild?.url;
    const childData = event.snapshot.firstChild?.data;

路线更改时获取路线自定义数据

getting route custom data when route changes

angular

angular-router