각도의 특정 페이지/구성 요소에서 측면 탐색 바를 표시하지 않습니다.

Question

현재 Jhipster를 사용하고 있지만 각도를 사용하면서 웹 응용 프로그램을 만들고 있습니다. 측면 탐색 모음을 만들었으며 모든 페이지 상단에 탐색 막대도 있습니다. 지금 당장 저는 특정 페이지에서 사이드 네비게이션을 숨기려고 노력하고 있습니다. 어떻게 할 지 생각했습니다.

나는 현재를 얻기 위해 최신 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(); 
    }); 
    } 
}