时间戳

首页 > 解决方案 > 从路由器动态构建面包屑

angular - 从路由器动态构建面包屑

问题描述

我正在尝试为我的应用程序构建一个面包屑路径，尽可能少的代码。

为此，我正在监听路由器事件，并从当前路由快照中获取数据（假设每条路由都有一个碎屑数据）。

现在，我有一个可行的解决方案，自动构建路线。

但是一旦用户导航它就不起作用：我不知道如何检测路由的方向（向下或向上），所以我不知道如何添加/删除项目面包屑。

我考虑过再次遍历整个树（以防用户没有从父母导航到孩子 - 反之亦然 - ），但我也不知道该怎么做。

我创建了一个简单的 stackblitz 来显示我的问题：

https://stackblitz.com/edit/angular-ysbzkp?file=src%2Fapp%2Fapp.component.ts

树读的相关代码：

constructor(
  private router: Router,
  private route: ActivatedRoute,
) {
  this.router.events.pipe(
    filter(event => event instanceof ActivationStart),
    map((event: ActivationStart) => event.snapshot.data),
    map(data => data && data.crumb || undefined),
    filter(v => !!v),
  ).subscribe(crumb => this.crumbs.push(crumb));
}

标签： angulartypescriptangular-routing

解决方案

好像我自己想出了答案。

取而代之的是ActivationStart，路由器要听ActivationEnd，还要听NavigationEnd。

在激活端，路由器以相反的顺序发送事件，包含所有路由。

通过将它们放在缓冲区中，可以在导航端反转缓冲区，然后将其清除，从而产生与应用程序一致的碎屑痕迹。

这是 stackblitz 和相关代码：

https://stackblitz.com/edit/angular-rjg2ja?file=src/app/app.component.ts

let buffer = [];

this.router.events.pipe(
  filter(event => event instanceof ActivationEnd),
  map((event: ActivationEnd) => event.snapshot.data),
  map(data => data && data.crumb || undefined),
  filter(v => !!v),
).subscribe(crumb => buffer.push(crumb));

this.router.events.pipe(
  filter(event => event instanceof NavigationEnd)
).subscribe(event => {
  this.crumbs = buffer.reverse();
  buffer = [];
});

推荐阅读