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

Question

我正在构建 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-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 .当组件在外面时，它的生命周期会更长，并且会收到事件。

您可以通过给您的可观察对象一个起始值来轻松解决这个问题。

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