Question

我目前正在使用Jhipster进行Web应用，当然还有Angular。我创建了一个侧面导航栏，每个页面的顶部都有一个导航栏。现在我试图在某些页面上隐藏侧面导航栏，我现在知道如何做到这一点。

我使用的是最新版本的JHipster和Angular 4.

＆＃13;

<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>

＆＃13;

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'jhi-sidenav',
  templateUrl: './sidenav.component.html',
  styleUrls: [
      'sidenav.scss'
  ]
})
export class SidenavComponent implements OnInit {

  constructor() { }

  ngOnInit() {

  }

}

＆＃13;

Answer 1

执行此操作的方法是通过构造函数中的Router和Location Angular来获取当前路径，然后，只需使用*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();
    });
  }
}

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

1 个答案: