Masquer le code HTML du composant racine en fonction de l'itinéraire actif actuel

refactor

L'image ci-dessous montre mon SPA développé en utilisant Angular 2.

entrez la description de l'image ici Les liens de menu affichés en haut font partie du composant racine, et ci-dessous se trouve le html du composant racine.

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" [routerLink]="['']" routerLinkActive="active" >eShop Admin</a>
    </div>
    <ul class="nav navbar-nav">
      <li ><a [routerLink]="['']">Home</a></li>      

      <li><a [routerLink]="['./categories']" routerLinkActive="active">Categories</a></li>
      <li><a [routerLink]="['./products']" routerLinkActive="active">Products</a></li>

      <li><a [routerLink]="['./about']" routerLinkActive="active">About</a></li>
      <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</li>
    </ul>      

  </div>
</nav>

<router-outlet></router-outlet>

Maintenant, mon exigence est que si la route active actuelle est "Connexion", alors les liens de menu dans le composant racine ne doivent pas être affichés.

Une idée de la meilleure façon de mettre en œuvre cela?

refactor

J'ai suivi les étapes ci-dessous pour masquer / afficher les liens en fonction de l'itinéraire actif

  1. Création d'un service (AppService) avec une propriété booléenne "blnDisplayMenu" définie sur true par défaut.

    import { Injectable , OnInit } from '@angular/core';
@Injectable()
export class AppService implements OnInit {

   public blnDisplayMenu:boolean;

   constructor() { 
    this.blnDisplayMenu = true;
   }

   ngOnInit() { }
}

  2. Et ci-dessous se trouve le code TS du composant racine pertinent où, en fonction de la valeur de "blnDisplayMenu", il est décidé d'afficher le menu ou non. 

     ...
import { AppService } from './app.service';

blnDisplayMenu:boolean;

constructor(private appService: AppService) { }

ngDoCheck() {        
this.blnDisplayMenu = this.appService.blnDisplayMenu;        
}

  3. Dans le html du composant racine de l'application, le menu s'affiche en fonction de la valeur de blnDisplayMenu

    <nav class="navbar navbar-inverse" *ngIf="blnDisplayMenu">

  4. Dans le composant de connexion, la valeur de la propriété blnDisplayMenu d'AppService est à false dans ngOnInit et à true dans les hooks de cycle de vie ngDestroy.

Articles connexes

Afficher et masquer le composant en fonction de l'objet actuel

marwane J'ai un composant parent Editoravec un tableau d'objets mappés à un autre composant Sceneen utilisant la méthode map : function Editor() { const [URL, setURL] = useState(); const [scenes, setScenes] = useState([]); const addScene = () => { con