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

Question

我正在使用当前位置路径（如homepage、loginpage、logoutpage等）搜索在我的 angular 应用程序上显示/隐藏组件的最佳方式。我订阅了给我当前路径的路由器事件，所以如果我在登录页面中，我应该隐藏“导航栏组件”，如果我在主页中，我应该显示它。这种方法应该适用于不同当前页面中的不同组件。所以我想在这个方法里面*ngIf：应用程序组件.html<nav *ngIf="myService.isComponentPartOfTheCurrentPage('navbar')">   ...some navigation buttons here</nav>我的服务.tsisComponentPartOfTheCurrentPage(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) {

  this.currentRoute$ = router.events.pipe(

    filter(e => e instanceof NavigationEnd),

    map((e: NavigationEnd) => e.url)

  );

}

然后使用异步管道收听 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">

   <div *ngIf="section === 'navbar'">Something</div>

</nav>

每次行为主体发出时，section 变量都会神奇地更新。