从路由器动态构建面包屑

Question

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

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

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

但它不会在用户导航后立即起作用：我不知道如何检测路线的方向（树下或上），所以我不知道如何 add/remove 来自面包屑的物品。

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

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

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

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

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

从路由器动态构建面包屑

Dynamically build breadcrumbs from router

typescript

angular-routing

angular