时间戳

首页 > 解决方案 > 基于路线的显示元素 - Angular

javascript - 基于路线的显示元素 - Angular

问题描述

我在尝试display:none根据我想要的路线设置导航栏时遇到了很大的麻烦。我确实成功订阅了该路线，但我无法根据它关联它的显示。

到目前为止，我有这个：

export class AppComponent implements OnInit {

  jwtHelper: JwtHelper = new JwtHelper();
  public location = '';

  constructor(private authService: AuthService, private router: Router, private http: Http) {
    this.location = router.url;
    this.router.events.subscribe((location) => {
      console.log(location);
      return true;
    });
  }
}

对于我的应用程序 component.ts

<div class="app-nav">
  <!-- style="display:none; -->
  <app-navbar></app-navbar>
</div>
<div class="container outlet">

  <router-outlet></router-outlet>

</div>

和 html

选择<app-nav></app-nav>器不能仅在 URL 为空（即'/'路由）时出现，而必须在所有其他路由中都可用。有人能帮我吗？

标签： javascriptangular

解决方案

所以你基本上可以在这里利用 rxjs 的力量。 this.router.events是一个事件流（称为 Observable）。我们可以获取流并将其 ( map) 转换为布尔属性。然后我们*ngIf在要切换的组件上设置一个，如下所示：

<app-nav *ngIf="showNav$ | async"></app-nav>

由于this.router.events是一个流，每次它发出一个新值时，都会生成一个新的布尔值。html 模板中使用的流与async管道一起使用，将布尔值解包到 html 中，它还会自动为您订阅和取消订阅。

一个完整的 stackblitz 在这里。

PS。顺便说一句，不要因为有人对你的问题投反对票而气馁，这种情况在这里发生得越来越频繁，没有解释为什么。我赞成你的问题，因为它很有意义，答案可以对其他人有所帮助。

推荐阅读