时间戳

首页 > 解决方案 > Angular 将父路由数据与当前路由合并

angular - Angular 将父路由数据与当前路由合并

问题描述

我想有一种简单的方法来访问当前子路线上父母的所有路线数据，这似乎是一项常见的任务，我错过了一些内置的东西吗？

例子

const routes: Routes = [
  {
    path: '',
    component: WrapperComponent,
    data: {
      prop1: 'abc',
    },
    children: [
      {
        path: '',
        component: HomeComponent,
        data: {
          prop2: '1',
          prop3: 'Some other data',
        },
      },
      {
        path: 'welcome',
        data: {
          prop1: 'efg',
          prop2: 'my cool prop',
        },
      },
];

我的目标是激活路由的某种属性，它返回合并的路由数据，所以如果在：

/ - 路线数据将是

{
   prop1: 'abc',
   prop2: '1',
   prop3: 'Some other data',
}

/welcome - 路线数据将是

{
   prop1: 'efg',
   prop2: 'my cool prop',
}

我已经使用以下代码实现了这一点，但我敢打赌，使用 observables 的人可以写得更好。

this.router.events  // private router: Router,
  .pipe(
    filter((event) => event instanceof NavigationEnd),
    map(() => this.activatedRoute),
    map((route) => {
      let data: any = {};
      while (route.firstChild) {
        data = { ...data, ...route.firstChild.snapshot.data };
        route = route.firstChild;
      }
      return data;
    }),
  ).subscribe((e) => console.log(e));

这个功能是否已经存在于角度？

标签： angularrxjs

解决方案

我认为可以通过使用paramsInheritanceStrategy: 'always'when you set来做到这一点RouterModule：

@NgModule({
  imports: [
    RouterModule.forRoot(routes, { paramsInheritanceStrategy: 'always' })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }

推荐阅读