Angular Breadcrumb，显示用户到达当前页面的路线

Question

几天前我开始使用 Angular。我必须向一个站点添加一个可点击的面包屑，该站点向用户显示登陆该页面所采取的路线。例如，可以从主页和商店访问产品页面。 如果用户在主页中并点击产品，这就是我想要显示的内容：

Home > Products

但是，如果他的用户在主页中，点击商店，然后点击产品，我想要这个：

Home > Shop > Products

请注意，app-routing.module.ts Products 不是 Shop 的子代，Shop 也不是 Home 的子代。我无法修改路由，因此整个站点中的每个页面都是“独立的”。

这可能吗？您有任何可能对我有帮助的建议或实施吗？谢谢！

Answer 1

路由数据是我最喜欢的实现您发布的目标的选项之一。

在您的路由配置数组中：

  {
    path: 'Shop',
    component: ShopComponent,
    data: { breadcrumbs: ['home'] }
  }, {
    path: 'Products',
    component: ProductsComponent,
    data: { breadcrumbs: ['home', 'Shop'] }
  },

您可以在组件中使用它，例如：

constructor(private activatedRoute: ActivatedRoute) { }

  ngOnInit() {
    this.activatedRoute.data.subscribe(d => {
      console.log(d.breadcrumbs) // ['home']
    })
  }

您可以阅读更多内容：https://angular.io/guide/router#configuration