Angular4-Bootstrap4：從導航欄創建subnav欄

Question

我試圖實現兩層導航欄，第二個變得可見與其各自的選項點擊第一個導航欄中的鏈接。

我試着用id和data-target實現它在其documentation解釋，但插件似乎並沒有工作，ngx-bootstrap尚未開發的導航欄模塊。

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

在你的部分，在那裏你有你的subnav。嘗試將三個導航列表移動到他們自己的「摺疊div」中。像這樣：

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

當您點擊一個觸發摺疊功能的按鈕時，它只會觸發指定的部分。因此，如果您顯示部分A，然後單擊以顯示部分B，則A仍然存在。爲了解決這個問題，在每個部分放上「* ngIf」（就像我上面所做的那樣），那麼A部分只有在C和B相同時纔可見。

爲了使這項工作，做一個簡單的功能，在您的app.component.ts類：

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

，然後都單擊每個主導航按鈕的事件：

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

完整的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" (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> 

希望它解決了這個問題。