J'essaie mais lorsque je clique sur Lien déroulant
nemu, rien ne se passe.
<nav class="navbar navbar-expand-lg navbar-light bg-light"> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav mr-auto"> <li class="nav-item"> <a class="nav-link" routerLink="dashboard">dashboard</a> </li> <li class="nav-item"> <a class="nav-link" routerLink="calendar">calendar</a> </li> <li class="nav-item"> <a class="nav-link" routerLink="manager">manager</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" id="navbardrop" data-toggle="dropdown"> Dropdown link </a> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a> </div> </li> </ul> <!--ul class="navbar-nav navbar-right"> </ul--> </div> </nav>
MODIFIER:
J'utilise https://ng-bootstrap.github.io/#/ components / datepicker / overview et navbar ne sont pas présents. p>
4 Réponses :
Vous ne devriez probablement pas inclure bootstrap.min.js dans le projet (jquery et popper.js aussi).
"styles":[ "styles.css", "../node_modules/bootstrap/dist/css/bootstrap.css" ], "scripts":[ "../node_modules/jquery/dist/jquery.js", "../node_modules/bootstrap/dist/js/popper.js", "../node_modules/bootstrap/dist/js/bootstrap.js" ],
désolé, j'ajoute des "scripts": ["node_modules / bootstrap / dist / js / bootstrap.js"]
mais ne fonctionne pas
vous devriez ajouter Jquery, bootstrap écrit basé sur jquery, et pour nav, il a également utilisé popper
vous pouvez également le voir, Dupliquer la question
si vous ne voulez pas ajouter jquery, pooper et bootstrap JS dans votre projet, vous pouvez faire comme ça, j'ai ajouté un exemple de navbar et btn-group
explication
import {Component, EventEmitter, OnInit, Output} from '@angular/core'; @Component({ selector: 'app-header', templateUrl: './header.component.html', styleUrls: ['./header.component.css'] }) export class HeaderComponent implements OnInit { show: boolean = false; constructor() {} ngOnInit() {} }
lorsque vous cliquez sur la balise anchor , show variable bascule et qui contient le type booléen (spécifié dans le fichier .ts ). au moment div.dropdown-menu , vérifiez la classe show et si elle est fausse, elle ne peut pas être affichée ou vice versa.
app.component.html
Dans la barre de navigation
<div class="btn-group"> <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" (click)="show=!show">Action</button> <div class="dropdown-menu" [ngClass]="{show: show === true}"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> </div> </div>
Dans btn-group
<nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="javascript:void(0)">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="javascript:void(0)">List 1</a> </li> <li class="nav-item"> <a class="nav-link" href="javascript:void(0)">List 2</a> </li> </ul> <ul class="navbar-nav"> <li class="nav-item dropdown ml-auto"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" data-toggle="dropdown" (click)="show=!show">Dropdown</a> <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown" [ngClass]="{show: show === true}"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Something else here</a> </div> </li> </ul> </div> </nav>
show class is use to show menu of dropdown
cela ne fonctionne pas car je pense qu'il y a un problème avec le popper.js, j'ai eu le même problème mais j'ai pu le résoudre ... Essayez ceci dans votre angular.json
importez les scripts p>
"./node_modules/jquery/dist/jquery.js", "./node_modules/bootstrap/dist/js/bootstrap.bundle.js"
ça devrait marcher
J'ai trouvé dans la documentation ng-bootstrap que navbar n'existait pas. J'ai donc ajouté jQuery et ça marche.
"scripts": [ "node_modules/jquery/dist/jquery.js", "node_modules/bootstrap/dist/js/bootstrap.js" ]
et ajoute ceci dans angular.json (Angular 7):
npm install bootstrap --save npm install jquery --save
Avec
ng-bootstrap
, vous pouvez gérer le menu déroulant avec la directivengbCollapse
, comme indiqué dans cette réponse .