角度の特定のページ/コンポーネントのサイドナビゲーションバーを非表示にする

Question

現在、JhipsterともちろんAngularを使用している間は、Webアプリケーションで作業しています。 サイドナビゲーションバーを作成しました。また、すべてのページの上部にナビゲーションバーがあります。 今、サイドページを特定のページに隠すようにしています。これを行う方法がわかりました。

私はJHipsterの最新バージョンと角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(); 
    }); 
    } 
}