angular - 以 Angular 隐藏某些页面/组件上的侧导航栏

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

实现此目的的一种方法是通过构造函数中 Angular 的 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();
    });
  }
}