web-dev-qa-db-fra.com

Le menu déroulant de la barre de navigation ne fonctionne pas avec Angular et Bootstrap 4

Je développe une application Web avec Angular 5 et Bootstrap 4 et je rencontre des problèmes avec les menus déroulants de la barre de menu de navigation. Je suis la documentation https://getbootstrap.com/docs/4.0/components/navs/ mais je ne sais pas pourquoi le menu déroulant ne fonctionne pas!

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

Qu'est-ce que je fais mal?

Edit I:

J'ai ajouté jquery et popper via npm, mettez à jour muy angular-cli.json et redémarrez le serveur:

angular-cli.json:

 enter image description here

Et quand je charge la page, j'ai cette erreur:

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

Quand j’ai installé jquery j’ai cette sortie:

 enter image description here

Et quand j’ai installé popper j’ai cette sortie:

 enter image description here

Qu'est-ce que je fais mal?

htmlcssangularbootstrap-4
6
José Carlos

Vous devez vous assurer que popper.js est inclus et chargé dans votre application Angular car il est requis pour tout ce qui apparaît ou qui se déroule dans Bootstrap 4.

Voici à quoi devrait ressembler la partie pertinente de votre 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"
],

Pour installer popper.js, utilisez cette commande: 

npm install popper.js --save

Référence: https://www.npmjs.com/package/popper.js

9
WebDevBooster

En plus deapp.module.ts, vous devez importer le module MDBBootstrapModule.forRoot() dans le module où vous mettez le code de barre de navigation.

Exemple: ../custom.module.ts

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