Angular4-Bootstrap4: Créer une barre de sous-navigation à partir de la barre de navigation

Question

J'essaie d'implémenter deux couches de navbar, et la seconde devient visible avec ses options respectives en cliquant sur un lien dans la première barre de navigation.

J'ai essayé de le mettre en œuvre avec id et data-target comme expliqué dans son documentation, mais le plugin ne semble pas fonctionner et ngx-bootstrap n'a pas encore module développé pour navbar.

HTML

<nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse"> 
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarLevelOne"> 
    <span class="navbar-toggler-icon"></span> 
    </button> 
    <a class="navbar-brand" href="#">BRAND</a> 
    <div class="collapse navbar-collapse" id="navbarLevelOne"> 
    <ul class="navbar-nav"> 
     <li class="nav-item"><a class="nav-link" data-toggle="collapse" routerLinkActive="active" data-target="#a">A</a></li> 
     <li class="nav-item"><a class="nav-link" data-toggle="collapse" routerLinkActive="active" data-target="#b">B</a></li> 
     <li class="nav-item"><a class="nav-link" data-toggle="collapse" routerLinkActive="active" data-target="#c">C</a></li> 
    </ul> 
    </div> 
</nav> 
<nav class="navbar navbar-toggleable-md navbar-light bg-faded"> 
    <div class="collapse navbar-collapse"> 
    <ul class="navbar-nav" id="a" > 
     <li class="nav-item"><a class="nav-link" href="#">a</a></li> 
     <li class="nav-item"><a class="nav-link" href="#">b</a></li> 
     <li class="nav-item"><a class="nav-link" href="#">c</a></li>   
    </ul> 
    <ul class="navbar-nav" id="b" > 
     <li class="nav-item"><a class="nav-link" href="#">p</a></li> 
     <li class="nav-item"><a class="nav-link" href="#">q</a></li> 
     <li class="nav-item"><a class="nav-link" href="#">r</a></li>   
    </ul> 
    <ul class="navbar-nav" id="c" > 
     <li class="nav-item"><a class="nav-link" href="#">x</a></li> 
     <li class="nav-item"><a class="nav-link" href="#">y</a></li> 
     <li class="nav-item"><a class="nav-link" href="#">z</a></li>   
    </ul> 
    </div> 
</nav> 

Answer 1

Dans votre section où vous avez votre subnav. Essayez de déplacer les trois listes de nav dans leur propre div "collapse". Comme si:

<nav class="navbar navbar-toggleable-md navbar-light bg-faded"> 
     <div class="collapse" id="a" *ngIf="a"> 
     <ul class="navbar-nav"> 
      <li class="nav-item"><a class="nav-link" href="#">a</a></li> 
      <li class="nav-item"><a class="nav-link" href="#">b</a></li> 
      <li class="nav-item"><a class="nav-link" href="#">c</a></li> 
     </ul> 
     </div> 
     <div class="collapse" id="b" *ngIf="b"> 
     <ul class="navbar-nav"> 
      <li class="nav-item"><a class="nav-link" href="#">p</a></li> 
      <li class="nav-item"><a class="nav-link" href="#">q</a></li> 
      <li class="nav-item"><a class="nav-link" href="#">r</a></li> 
     </ul> 
     </div> 
     <div class="collapse" id="c" *ngIf="c"> 
     <ul class="navbar-nav"> 
      <li class="nav-item"><a class="nav-link" href="#">x</a></li> 
      <li class="nav-item"><a class="nav-link" href="#">y</a></li> 
      <li class="nav-item"><a class="nav-link" href="#">z</a></li> 
     </ul> 
     </div> 
    </nav> 

Lorsque vous cliquez sur un bouton qui déclenche la fonction de réduction, il ne déclenche que la section spécifiée. Par conséquent, si vous affichez la section A, puis cliquez pour afficher la section B, A sera toujours là. Pour résoudre ceci, mettre "* ngIf" sur chaque section (comme je l'ai fait ci-dessus), la section A ne sera alors visible que si a est défini et même pour C et B.

Pour faire ce travail, faire une simple fonction dans votre app.component.ts classe:

setNav(s: string) { 
    this.a = false; 
    this.b = false; 
    this.c = false; 

    switch (s) { 
     case 'a': 
     this.a = true; 
     break; 
     case 'b': 
     this.b = true; 
     break; 
     case 'c': 
     this.c = true; 
     break; 
    } 
    } 

puis ont cliquez sur les événements chacun des boutons sur la principale navigation:

<li class="nav-item"><a class="nav-link" data-toggle="collapse" routerLinkActive="active" data-target="#a" (click)="setNav('a')">A</a></li> 

le HTML complet est alors:

<nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse"> 
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarLevelOne"> 
    <span class="navbar-toggler-icon"></span> 
    </button> 
    <a class="navbar-brand" href="#">BRAND</a> 
    <div class="collapse navbar-collapse" id="navbarLevelOne"> 
    <ul class="navbar-nav"> 
     <li class="nav-item"><a class="nav-link" data-toggle="collapse" routerLinkActive="active" data-target="#a" (click)="setNav('a')">A</a></li> 
     <li class="nav-item"><a class="nav-link" data-toggle="collapse" routerLinkActive="active" data-target="#b" (click)="setNav('b')">B</a></li> 
     <li class="nav-item"><a class="nav-link" data-toggle="collapse" routerLinkActive="active" data-target="#c" (click)="setNav('c')">C</a></li> 
    </ul> 
    </div> 
</nav> 
<nav class="navbar navbar-toggleable-md navbar-light bg-faded"> 
    <div class="collapse" id="a" *ngIf="a"> 
    <ul class="navbar-nav"> 
     <li class="nav-item"><a class="nav-link" href="#">a</a></li> 
     <li class="nav-item"><a class="nav-link" href="#">b</a></li> 
     <li class="nav-item"><a class="nav-link" href="#">c</a></li> 
    </ul> 
    </div> 
    <div class="collapse" id="b" *ngIf="b"> 
    <ul class="navbar-nav"> 
     <li class="nav-item"><a class="nav-link" href="#">p</a></li> 
     <li class="nav-item"><a class="nav-link" href="#">q</a></li> 
     <li class="nav-item"><a class="nav-link" href="#">r</a></li> 
    </ul> 
    </div> 
    <div class="collapse" id="c" *ngIf="c"> 
    <ul class="navbar-nav"> 
     <li class="nav-item"><a class="nav-link" href="#">x</a></li> 
     <li class="nav-item"><a class="nav-link" href="#">y</a></li> 
     <li class="nav-item"><a class="nav-link" href="#">z</a></li> 
    </ul> 
    </div> 
</nav> 

Espérons que cela a résolu le problème.