Question

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

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

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

但是一旦用户导航它就不起作用：我不知道如何检测路由的方向（沿着树，还是向上），所以我不知道如何添加/删除路由面包屑中的物品。

我曾想过要遍历整个树（以防用户不从父级导航到子级，反之亦然），但是我也不知道该怎么做。

我创建了一个简单的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));
}

Answer 1

好像我自己想出了答案。

路由器应该监听ActivationStart，而不是ActivationEnd，而不是NavigationEnd。

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

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

这是堆叠闪电战和相关代码：

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 = [];
});

从路由器动态构建面包屑

1 个答案: