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> 

希望它解决了这个问题。