如何在Angx 5的ngx-bootstrap中使用Bootstrap导航栏? [英] How can I use Bootstrap navbar in ngx-bootstrap for Angular 5?

问题描述

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

Bootstrap navbar doesn't exist in the ngx-bootstrap components list. Please help me to implement it.

推荐答案

没有将navbar实现为单独的组件，但是可以使用Collapse Module来实现.

There's no implementation of navbar as a separate component but it can be done with Collapse Module.

Example = https://stackblitz.com/编辑/ngx-bootstrap-rc8ab4?file=app%2Fapp.component.ts

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

这篇关于如何在Angx 5的ngx-bootstrap中使用Bootstrap导航栏?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！