在 router-outlet 注入的延迟加载模块中使用面包屑组件

Question

我正在构建 angular 8 面包屑导航组件。应用程序要求它通常显示在页面的内容中（不仅如此），但它永远不会位于 header 中，而 header 可能在 router-outlet 之外。这就是问题出现的地方。我正在使用延迟加载模块，将组件放置在延迟加载组件模板中。

我想创建一个可观察对象。首先使用过滤器映射到路由器根 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-outlet 内呈现时才会出现此问题。如果我将它放在模板中的同一级别，那么它就可以正常工作。如果订阅 router.events 的 NavigationEnd 事件的条件检查正常，则正常。有什么办法吗？

感谢您的建议！

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

Answer 1

The problem appears only when breadcrumb component is rendered inside router-outlet. If I place it on the same level in the template then it works just fine.

组件在路由更改时被销毁，因为它在<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);
      })
    );

在 router-outlet 注入的延迟加载模块中使用面包屑组件

Using breadcrumb component inside lazy loaded modules injected by router-outlet

angular

typescript

rxjs

angular2-routing