Question

我想有一种简单的方法来访问当前子路线上父母的所有路线数据，这似乎是一项常见的任务，如果我缺少内置在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',
}

/欢迎-路线数据为

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

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

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

此功能是否已经存在于angular中？

Answer 1

我认为在设置paramsInheritanceStrategy: 'always'时可以通过使用RouterModule来做到这一点：

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

Answer 2

我认为这应该有效：

constructor(router: Router) {
  router.events.pipe(
    filter(e => e instanceof ActivationEnd),
    buffer(router.events.pipe(filter(e => e instanceof NavigationEnd), debounceTime(0))),
    map((events: ActivationEnd[]) => events.reduce((acc, curr) => ({ ...acc, ...curr.snapshot.data }), {}))
  );
}

过滤掉ActivationEnd事件（那里有路由快照，因此我们可以从中获取单个路由的数据）
缓冲它们，直到获得当前堆栈的所有NavigationEnd事件
减少所有缓冲的事件并收集一个对象内的数据（不处理冲突）

角度合并父路线数据与当前路线

2 个答案: