it-swarm.com.ru

Раскрывающееся меню панели навигации не работает с Angular и ​​Bootstrap 4

Я разрабатываю веб-приложение с Angular 5 и Bootstrap 4, и у меня возникают проблемы с выпадающими меню навигационной панели. Я слежу за документацией https://getbootstrap.com/docs/4.0/components/navs/ но не знаю, почему не работает раскрывающееся меню!

<header>
    <div class = "row align-items-end nopadding">
        <div class = "col-md-3" style = "background-color: blanchedalmond"><app-logo></app-logo></div>
        <div class = "col-md-6">
            <ul class="nav justify-content-center">
                <li class="nav-item">
                    <a class="nav-link menu-item" href="#">Ligas</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link menu-item" href="#">Gráficas</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link menu-item" href="#">Artículos</a>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link menu-item dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Clasificaciones</a>      
                    <div class=" dropdown dropdown-menu">
                        <a class="dropdown-item menu-item" href="#">Equipos</a>
                        <a class="dropdown-item menu-item" href="#">Jugadoras</a>
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item" href="#">Separated link</a>
                    </div>
                </li>                
            </ul>
        </div>
        <div class = "col-md-3 right-content">
            Right column
        </div>
    </div>
</header>

Что я делаю неправильно?

Изменить I:

Я добавил jquery и popper через npm, обновил muy angular-cli.json и перезапустил сервер:

угловой cli.json:

enter image description here

И когда я загружаю страницу, я получаю эту ошибку:

Error in the source mapping: request failed with status 404 
Resource URL: http://localhost:4200/ scripts.bundle.js 
Sourcemap URL: bootstrap.min.js.map

Когда я установил jquery, я получил такой вывод:

enter image description here

И когда я установил popper, я получил такой вывод:

enter image description here

Что я делаю неправильно?

6
José Carlos

Вы должны убедиться, что popper.js включен и загружен в ваше приложение Angular, потому что это требуется для всех вещей, которые всплывают или выпадают в Bootstrap 4.

Вот как должна выглядеть соответствующая часть вашего angular-cli.json:

"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"styles.css"
],
"scripts": [
"../node_modules/jquery/dist/jquery.min.js",
"../node_modules/popper.js/dist/umd/popper.min.js",
"../node_modules/bootstrap/dist/js/bootstrap.min.js"
],

Для установки popper.js используйте эту команду: 

npm install popper.js --save

Ссылка: https://www.npmjs.com/package/popper.js

9
WebDevBooster

В дополнение кapp.module.ts, вам необходимо импортировать модуль MDBBootstrapModule.forRoot() в модуль, куда вы помещаете код навигационной панели.

Пример: ../custom.module.ts

import { MDBBootstrapModule } from 'angular-bootstrap-md';
...
@NgModule({
  imports: [
    CommonModule,
    MDBBootstrapModule.forRoot()
  ],
...
0
Alejandro E