bootstrap-4 - 折叠在导航栏面包屑按钮的 ng-bootstrap 和 Angular 4 应用程序中不起作用

Question

我正在为我的应用程序使用 angular 4 和 bootstrap 4 beta 2 和 ng-bootstrap，并且还使用 ng-bootstrap。

我从引导文档示例中添加了导航栏。

代码如下所示:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

我还在 angular-cli.json 中添加了引导样式。该代码如下所示:

 "styles": [
        "../node_modules/bootstrap/dist/css/bootstrap.min.css",
        "styles.css"
      ],

移动 View 上的面包屑导航按钮在单击时没有响应。当我尝试检查相同的内容时:我知道“折叠”类没有被添加到单击按钮中。

Answer 1

使用 ng-bootstrap(或者在我的情况下是 ngx-boostrap)绝对简化了事情，因为我不必担心 jQuery 和 popper。正如当前接受的答案所述。

然而，这并没有彻底解决我的问题，因为我错过了重要的细节。在你启动并运行 ngx-bootstrap 之后，你可以从绑定(bind) collapse 开始。 navbar-collapse 的属性(property)div 到组件文件中的变量:

<div [collapse]="isCollapsed" class="navbar-collapse collapse" id="navbar-main">
  ...
</div>

仅此还不够，您实际上需要通过绑定(bind)到切换器按钮的单击事件来自己修改此变量(这是我错过的部分):

<button (click)="isCollapsed = !isCollapsed" class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-main" aria-controls="navbar-main" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
</button>

(click)="isCollapsed = !isCollapsed"对我来说是基本的缺失部分。这会将按钮的 onClick 事件绑定(bind)到您的 isCollapsed 变量，单击时切换它，从而设置 collapse您的导航栏的属性适当。

这是我发现的 jsfiddle 最终帮助我找出了我的错误:
jsFiddle external link