Question

我正在Angular上构建一个大型应用程序，该应用程序使用具有子路线的功能模块。每个子节都是通过节特定的布局呈现的，该布局为MVP设置了子页面的状态。例如：

/app/projects/yJEBuuOmmRv7WuVomGkb将在任何子路径上将项目yJEBuuOmmRv7WuVomGkb加载到状态容器中。

我已经尝试观察路由器事件，但是遇到了一些具有挑战性的情况，其中应用程序在不同的环境（子代与父代）中处理不同的路由器。

我想在路由定义中执行此操作，并且想知道是否有任何方法可以将回调函数附加到可以捕获路由参数并将其应用于状态容器的路由。

例如，类似于以下伪代码：

const routes: Routes = [
  {
    path: '',
    component: PageLayoutComponent,
    children: [
      {
        path: '',
        component: PagesComponent
      },
      {
        path: 'admin/settings',
        component: PageSettingsComponent
      },
      {
        path: 'admin/publishing',
        component: PagePublishingComponent
      },
      {
        path: ':pageId',
        component: PageDetailLayoutComponent,
        
        // pseudo code!!!
        onRoute: (params => {
          StateContainer.set('page', params.pageId);
        }),
        
        children: [
          {
            path: '',
            component: PageComponent
          }
        ]
      }
    ]
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class PagesRoutingModule { }

Answer 1

您可以选择将数据添加到路线。

您的路线中的数据属性：

示例：

{
   path: 'heroes',
   component: HeroListComponent,
   data: { title: 'Heroes List' 
 }

来自angular docs：

第三条路线中的data属性是存储任意属性的地方与该特定路线关联的数据。数据属性是可在每个激活的路线中访问。用它来存储诸如页面标题，面包屑文本和其他只读静态数据。你会在本指南的后面部分中，使用解决方案防护来检索动态数据。

解析器

示例：

{
    path: 'heroes',
    component: HeroListComponent,
    resolve: { hero: HeroResolver }
}

来自angular docs：

总而言之，您要延迟渲染路由组件，直到所有组件必要的数据已获取。

有关更多信息：https://angular.io/guide/router#resolve-guard 因此，这意味着如果您调用向组件提供数据的api端点，则应使用解析器。

也许您可以在组件的ngOnInit方法中调用StateContainer.set。

有没有办法将回调函数附加到Angular路由模块中的路由？

1 个答案: