我试图创建一个可用于有条件地隐藏我的应用程序中的主导航菜单的observable - 因此,当当前路线是登录页面时,导航将被隐藏,否则将显示。
然而,我无法找到一种简单的方法来做到这一点。我知道您可以注入ActivatedRoute,其中包含可观察的监视段和当前激活的URL段,但AppComponent需要可观察到的,这位于路由器插座之外。
我最终的解决方案是监控路由器本身的导航事件,并手动编写我所需的可观察量:
/** Returns a boolean observable that indicates, for each route,
* if the menu should be displayed or not
*/
isMenuVisible$(): Observable<boolean>{
let isMenuCurrentlyVisible = !this.router.isActive('login', true);
return this.router.events
.filter(e => e instanceof NavigationEnd) //every route change fires multiple events - only care about the route change as a whole
.map(() => !this.router.isActive('login', true))
.startWith(isMenuCurrentlyVisible)
;
}
然而,这个用例似乎并不奇怪,所以我想知道是否有更简单的方法来完成我想要的东西?