Angular4-Bootstrap4：从导航栏创建子导航栏

Question

我正在尝试实现两层导航栏，在第一个导航栏中单击 link 时，第二层导航栏会显示其各自的选项。

我尝试用 id 和 data-target 来实现它，正如其解释的那样 documentation, but plugin doesn't seem to work and 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

在你有子导航的部分。尝试将三个导航列表移动到它们自己的 "collapse 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 相同时，A 部分才会可见。

要完成这项工作，请在 app.component.ts class:

中创建一个简单的函数

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>

希望它解决了问题。

Angular4-Bootstrap4：从导航栏创建子导航栏

Angular4-Bootstrap4: Create subnav bar from navbar

angular

twitter-bootstrap-4