J'ai inclus bootstrap dans mon projet angularcli, mais lorsque j'essaie d'inclure une barre de navigation, aucun des éléments ne fonctionne correctement. J'utilise un exemple standard de barre de navigation boostrap du site Web, mais cela a l'air bizarre:
Quel est le problème avec mon projet qui fait que la barre de navigation ne se charge pas correctement?
navbar.component.html
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Navbar</a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
.angular-cli.json
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"styles.css"
],
Certains problèmes sont connus dans bootstrap 4, en particulier dans la mise en œuvre de navbar
Par conséquent, vous devez installer bootstrap [email protected]
si vous utilisez npm, les bibliothèques suivantes sont mieux recommandées
npm install [email protected] --save
npm install [email protected] tether jquery --save
Dans le fichier .angular-cli.json, ajoutez les dépendances
"styles":[
"styles.css",
"../node_modules/bootstrap/dist/css/bootstrap.css"
],
"scripts":[
"../node_modules/jquery/dist/jquery.js",
"../node_modules/tether/dist/js/tether.js",
"../node_modules/bootstrap/dist/js/bootstrap.js"
],
Utilisez le code HTML suivant
<nav class="navbarnavbar-inverse">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-togglecollapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Togglenavigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Angular5Website</a>
</div>
<div id="navbar" class="collapsenavbar-collapse">
<ul class="navnavbar-nav">
<li class="active"> <a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div><!--/.nav-collapse-->
</div>
</nav>
Le code ci-dessous montre comment implémenter la barre de navigation dans Angular avec ng-bootstrap et Bootstrap 4. Vous pouvez le voir à l’œuvre dans this plunker .
ng-bootstrap
est développée pour Angular et ne nécessite pas jQuery.navbar-toggleable-md
par navbar-expand-md
ngbCollapse
est utilisée pour afficher/masquer le menu déroulant<nav class="navbar navbar-expand-md navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" type="button" (click)="isNavbarCollapsed = !isNavbarCollapsed" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Navbar</a>
<div [ngbCollapse]="isNavbarCollapsed" class="navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
navbar.component.html:
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" (click)="toggleNavbarCollapsing()">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a routerLink="/" class="navbar-brand">Navbar</a>
</div>
<div class="navbar-collapse" [class.collapse]="navbarCollapsed">
...
navbar.component.ts:
navbarCollapsed = true;
toggleNavbarCollapsing() {
this.navbarCollapsed = !this.navbarCollapsed;
}