Панель навигации Bootstrap отсутствует в списке компонентов ngx-bootstrap. Пожалуйста, помогите мне реализовать это.

25
Hossein Bajan 2 Янв 2018 в 12:58

2 ответа

Лучший ответ

Нет реализации навигационной панели как отдельного компонента, но это можно сделать с помощью модуля Collapse.

Пример = 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 { }

ТС (отрывок)

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>
51
IlyaSurmay 24 Май 2018 в 08:52

В Angular V7 со следующей конфигурацией

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

Спасибо @llyaSurmay Действительно хороший пример. Мой случай немного отличался без складного модуля, который также использовал функциональный модуль, как показано ниже.

enter image description here

Если вы используете функциональный модуль, вам также необходимо добавить туда импорт выпадающего модуля. введите описание изображения здесь

Надеюсь, это поможет кому-то, кто пытается реализовать выпадающий модуль ngx-bootstrap на панели навигации. Спасибо

1
Ragavan Rajan 20 Мар 2019 в 02:04