时间戳

首页 > 解决方案 > 如何仅在特定路线上显示元素？

angular - 如何仅在特定路线上显示元素？

问题描述

我有一个带有一些基本登录和注册路由的导航栏，但问题是，在主页（'/'）上，我有一个关于我们的部分，我不想在登录时显示（'/ login') 或注册('/signup') 页面。那么我怎样才能仅在路线（'/'）上显示该部分？

标签： angular

解决方案

您可以将路由器与事件对象内部的events已解析结合使用：urlAfterRedirects

export class NavComponent {
  readonly showAbout$ = this.router.events.pipe(
    filter((event) => event instanceOf NavigationEnd)
    map((event) => this.canShowAbout(event.urlAfterRedirects)),
    startWith(this.canShowAbout(this.router.url))
  )

  constructor(readonly router: Router) {}

  canShowAbout(url: string): boolean {
    return ['/login', '/signup'].every((path) => !url.startsWith(path)
  }
}

并在您的组件中使用async管道：

<nav>
  <a routerLink="/home">Home</a>
  <a *ngIf="showAbout$ | async" routerLink="/about">
    About
  </a>
</nav>

推荐阅读