时间戳

首页 > 解决方案 > 在路由器出口注入的延迟加载模块中使用面包屑组件

angular - 在路由器出口注入的延迟加载模块中使用面包屑组件

问题描述

我正在构建 Angular 8 面包屑组件。应用程序要求它通常显示在页面的内容中（不仅），但它永远不会位于可能位于路由器插座之外的标题中。这就是问题出现的地方。我正在使用延迟加载的模块，将组件放置在延迟加载的组件模板中。

我想创建一个可观察的。首先使用过滤器映射到路由器根 firstChild。但我无法通过条件......这是我迄今为止尝试过的。

breadcrumbs$: Observable<Breadcrumb[]>;

constructor(router: Router, activatedRoute: ActivatedRoute) {
this.breadcrumbs$ = router.events.pipe(
            filter(event => event instanceof NavigationEnd),
                map(() => {
                    return this.buildBreadcrumbs(activatedRoute.root.firstChild);
            })
        );
}

buildBreadcrumbs(route: ActivatedRoute) {
// logic
}

仅当在路由器插座内呈现面包屑组件时才会出现此问题。如果我将它放在模板中的同一级别，那么它工作得很好。如果通过订阅 router.events 对 NavigationEnd 事件进行条件检查，则正常。有什么办法吗？

感谢您的建议！

编辑：我在这里附上了一些现实生活中的例子https://stackblitz.com/edit/breadcrumbs-mwsp

标签： angulartypescriptrxjsangular2-routing

解决方案

仅当在路由器插座内呈现面包屑组件时才会出现此问题。如果我将它放在模板中的同一级别，那么它工作得很好。

当路由改变时组件被销毁，因为它在内部<router-outlet>成为路由内容的一部分。当路由改变时，组件被销毁并且永远不会收到NavigationEnd. 当组件在外面时，它的寿命会更长，并且会接收到事件。

你可以通过给你的 observable 一个起始值来轻松解决这个问题。

    this.breadcrumbs$ = this.router.events.pipe(
      filter(event => event instanceof NavigationEnd),
      startWith(undefined),
      map(() => {
          return this.buildBreadcrumbs(this.activatedRoute.root.firstChild);
      })
    );

推荐阅读