如何在 Angular 5 的 ngx-bootstrap 中使用 Bootstrap 导航栏？答案

【问题标题】：How can I use Bootstrap navbar in ngx-bootstrap for Angular 5?如何在 Angular 5 的 ngx-bootstrap 中使用 Bootstrap 导航栏？
【发布时间】：2018-06-12 00:47:06
【问题描述】：

引导导航栏在 ngx-bootstrap 组件列表中不存在。请帮我实现它。

【问题讨论】：

标签： angular navbar ngx-bootstrap

【解决方案1】：

没有将导航栏作为单独的组件实现，但可以通过折叠模块来实现。

示例 = https://stackblitz.com/edit/ngx-bootstrap-rc8ab4?file=app%2Fapp.component.ts

模块

// App imports
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { CollapseModule } from 'ngx-bootstrap/collapse';

@NgModule({
  imports:      [ BrowserModule, CollapseModule.forRoot()],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

TS（摘录）

export class AppComponent  {
  isCollapsed = true;
}

HTML

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" (click)="isCollapsed = !isCollapsed" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>
    <div class="collapse navbar-collapse" [collapse]="isCollapsed">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
      </ul>
    </div>
  </div>
</nav>

【讨论】：

我试过用 bootstrap 4 来做这个，但到目前为止没有成功stackblitz.com/edit/angular-startup-proj
它有效。如果有人尝试：请记住，您必须在 app.module.ts 中导入 CollapseModule 才能使用 collapse 指令。
它丢失的一件事是它打开时的动画，知道如何解决这个问题吗？
在此处查看引导程序 4 的底部。不是我的答案，但它有效。 github.com/valor-software/ngx-bootstrap/issues/…
您可以通过将 isAnimated 设置为 true 来设置动画。 [collapse]="isCollapsed" [isAnimated]="true"

【解决方案2】：

在具有以下配置的 Angular V7 中

    Angular CLI: 7.2.2
    Node: 10.14.1
    OS: win32 x64
    Angular: 7.2.1

感谢@llyaSurmay 真的是一个很好的例子。我的情况略有不同，没有可折叠模块也使用功能模块，如下所示

如果您使用的是功能模块，那么您还需要在那里添加您的下拉模块导入

希望它对尝试在导航栏中实现 ngx-bootstrap 下拉模块的人有所帮助。谢谢

【讨论】：