以角度隐藏某些页面/组件上的侧面导航栏

Question

我目前正在开发一个 web 应用程序，同时使用 Jhipster，当然还有 Angular。 我创建了一个侧导航栏，每个页面的顶部还有一个导航栏。 现在我正试图在某些页面上完全隐藏侧导航栏，我现在知道如何做到这一点。

我正在使用最新版本的 JHipster 和 Angular 4。

<nav>
        <div id="container">
            <div class="sidebar">
                <ul id="side_nav">
                    <li class="test"><a href="#"><img src="../../../content/images/icons8-home-50.png"></a></li>
                    <li><a routerLink="project" routerLinkActive="active">Project Details</a></li>
                    <li><a routerLink="asset" routerLinkActive="active">Asset</a></li>
                    <li><a routerLink="threat" routerLinkActive="active">Threats</a></li>
                    <li><a routerLink="attack-tree-node" routerLinkActive="active">Attack-Tree</a></li>
                    <li><a href="#">Review</a></li>
                    <li><a href="#">Statistics</a></li>
                </ul>
            </div>
        </div>
</nav>

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'jhi-sidenav',
  templateUrl: './sidenav.component.html',
  styleUrls: [
      'sidenav.scss'
  ]
})
export class SidenavComponent implements OnInit {

  constructor() { }

  ngOnInit() {

  }

}

Answer 1

一种方法是通过构造函数中的 Router 和 Location 来获取当前路径，然后，只需使用 *ngIf 显示或不显示侧边栏，为你的路径想要。

sidenav.component.html

<nav *ngIf="path==='/asset'">
        <div id="container">
            <div class="sidebar">
                <ul id="side_nav">
                    <li class="test"><a href="#"><img src="../../../content/images/icons8-home-50.png"></a></li>
                    <li><a routerLink="project" routerLinkActive="active">Project Details</a></li>
                    <li><a routerLink="asset" routerLinkActive="active">Asset</a></li>
                    <li><a routerLink="threat" routerLinkActive="active">Threats</a></li>
                    <li><a routerLink="attack-tree-node" routerLinkActive="active">Attack-Tree</a></li>
                    <li><a href="#">Review</a></li>
                    <li><a href="#">Statistics</a></li>
                </ul>
            </div>
        </div>
</nav>

sidenav.component.ts

import { Router } from '@angular/router'
import { Location } from '@angular/common';

export class SidenavComponent implements OnInit {
path = '';
  constructor(private router: Router, private location: Location) {
    this.router.events.subscribe((val) => {
      this.path = this.location.path();
    });
  }
}