Question

尝试根据所需的路线将导航栏设置为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;
        });
       }

对于我的应用程序组件。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为'/'路由为空时出现，而在所有其他路由中必须可用。有人可以帮我吗？

Answer 1

有条件的渲染

<Component *ngIf="iWant ? true : false" />

看起来像这样。

选中此docs

Answer 2

因此，您基本上可以在这里利用rxjs的功能。 this.router.events是事件流（称为“可观察”）。我们可以获取流并将其（map）转换为布尔属性。然后，在要切换的组件上设置*ngIf，如下所示：

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

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

here是一个完整的可堆叠炸弹。

PS。顺便说一句，不要因某人对您的问题持否定态度而灰心，这在这里越来越频繁地发生，没有解释原因。 我回覆了您的问题，因为它很合理，而且答案可能对其他人有帮助。

基于路线的显示元素-角度

2 个答案: