在 angular 中的某些 pages/components 上隐藏侧边导航栏

Question

我目前正在使用 Jhipster 开发 Web 应用程序，当然还有 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();
    });
  }
}

在 angular 中的某些 pages/components 上隐藏侧边导航栏

Hide side navigationbar on certain pages/components in angular

hide

navbar

typescript

jhipster

angular