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
}

breadcrumbs$：可见；
构造函数（路由器：路由器，activatedRoute:activatedRoute）{
this.breadcrumbs$=router.events.pipe(
过滤器（事件=>NavigationEnd的事件实例），
地图（（）=>{
返回此.buildBreadcrumbs（activatedRoute.root.firstChild）；
})
);
}
buildBreadcrumbs（路由：ActivatedRoute）{
//逻辑
}

只有在路由器出口内部呈现面包屑组件时，问题才会出现。如果我把它放在模板的同一层上，那么它就可以正常工作。 如果订阅router.events的NavigationEnd事件的条件检查正常。有什么办法吗

谢谢你的建议

编辑：我在这里附上了一些现实生活中的例子

只有在路由器出口内部呈现面包屑组件时，问题才会出现。如果我把它放在模板的同一层上，那么它就可以正常工作

当路由更改时，组件将被销毁，因为它位于

中，它将成为路由内容的一部分。当路由更改时，组件将被销毁，并且永远不会收到

NavigationEnd

。当组件在外部时，其寿命更长，并将接收事件

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

this.breadcrumbs$=this.router.events.pipe(
过滤器（事件=>NavigationEnd的事件实例），
startWith（未定义），
地图（（）=>{
返回this.buildBreadcrumbs（this.activatedRoute.root.firstChild）；
})
);

您的问题陈述有点含糊不清。你能创建一个复制问题的stackblitz吗？@ysf当然！现在看这个例子。谢谢。这对我很有帮助，我只需要从buildBreadcrumbs（）方法开始。我将把它标为正确答案。