检查当前页面 url 后显示/隐藏组件

Question

我正在使用当前位置路径（如homepage、loginpage、logoutpage等）搜索在我的 angular 应用程序上显示/隐藏组件的最佳方式。

我订阅了给我当前路径的路由器事件，所以如果我在登录页面中，我应该隐藏“导航栏组件”，如果我在主页中，我应该显示它。

这种方法应该适用于不同当前页面中的不同组件。所以我想在这个方法里面*ngIf：

应用程序组件.html

<nav *ngIf="myService.isComponentPartOfTheCurrentPage('navbar')">

   ...some navigation buttons here

</nav>

我的服务.ts

isComponentPartOfTheCurrentPage(componentName: string): boolean {

  const url = getCurrentPath(); // This works fine

  return currenPathContainsThisComponent(componentName, url); // This is gonna return true or false.

}

这种方法的主要问题是角度循环多次调用此函数。我也读过一些不推荐这种事物之王的博客。

有没有更好的方法来实现这一点？

Answer 1

您可以监视路由器事件，特别NavigationEnd是将当前路由分配给一个可观察对象，然后在组件中检查我们当前所在的路由。服务：import { Router, NavigationEnd } from "@angular/router";import { filter, map } from "rxjs/operators";currentRoute$: Observable<string>;constructor(private router: Router) {&nbsp; this.currentRoute$ = router.events.pipe(&nbsp; &nbsp; filter(e => e instanceof NavigationEnd),&nbsp; &nbsp; map((e: NavigationEnd) => e.url)&nbsp; );}然后使用异步管道收听 observable 并进行检查*ngIf="(myService.currentRoute$ | async) === '/login'"您也可以或许用includes，如果你需要检查如果网址片段被包含在URL，然后你可以这样做：*ngIf="(myService.currentRoute$ | async).includes('login')

Answer 2

在订阅您的路线事件时，使用当前更新服务上的行为主题section$ = new BehaviorSubject(null);在你的路线子sections$.next(section);然后在您的组件中，您使用异步管道收听行为主题section$ = this.service.section$;并在模板中<nav *ngIf="section$ | async as section">&nbsp; &nbsp;<div *ngIf="section === 'navbar'">Something</div></nav>每次行为主体发出时，section 变量都会神奇地更新。