Как использовать Bootstrap JavaScript Components с ngx-bootstrap в Angular 7? - PullRequest
Новая
       31

Как использовать Bootstrap JavaScript Components с ngx-bootstrap в Angular 7?

0 голосов
/ 11 июня 2019

Я пытаюсь добавить Bootstrap Javascript в мое приложение Angular 7, используя это руководство в качестве руководства.

Я побежал npm install bootstrap ngx-bootstrap --save

Обновил мой angular.json так: 

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

Вот мой app.module.ts: 

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
import { TooltipModule } from 'ngx-bootstrap/tooltip';
import { ModalModule } from 'ngx-bootstrap/modal';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BsDropdownModule.forRoot(),
    TooltipModule.forRoot(),
    ModalModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

А вот мой app.component.html: 

<nav class="navbar navbar-default">
  <div class="container-fluid">
      <div class="navbar-header">
          <a class="navbar-brand">
            <img src="assets/img/ngx-bootstrap.svg" class="logo">
          </a>
          <span class="navbar-brand">Angular + Bootstrap</span>
      </div>
      <ul class="nav navbar-nav">
          <li class="active"><a href="#">
            Link <span class="sr-only">(current)</span>
          </a></li>
          <li><a href="#">Link</a></li>
          <li class="dropdown" dropdown> <!-- {1} -->
              <a dropdownToggle role="button"> <!-- {2} -->
                Dropdown <span class="caret"></span></a>
              <ul *dropdownMenu class="dropdown-menu"> <!-- {3} -->
                  <li><a href="#">Action</a></li>
                  <li><a href="#">Another action</a></li>
                  <li><a href="#">Something else here</a></li>
                  <li role="separator" class="divider"></li>
                  <li><a href="#">Separated link</a></li>
                  <li role="separator" class="divider"></li>
                  <li><a href="#">One more separated link</a></li>
              </ul>
          </li>
      </ul>
  </div>
</nav>

Панель навигации отображается как стандартная панель навигации без отображения стиля Bootstrap.

Я доказал, что стиль Bootstrap установлен, так как я могу использовать класс 'card' в другом div на странице.

Может кто-нибудь сказать, что мне не хватает, чтобы моя навигационная панель работала с Bootstrap & JavaScript? Большое спасибо заранее

1 Ответ

0 голосов
/ 25 июня 2019

Убедитесь, что загрузчик установлен в директорию вашего node_modules, если это так - этой конфигурации будет достаточно: 

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