J'essaie de créer un élément déroulant dans une barre de navigation Bootstrap en utilisant Angular 6. Mon code fonctionne lorsque je le teste en ligne:
<nav class="navbar bg-light navbar-light navbar-expand">
<ul class="navbar-nav">
<li class="nav-item dropdown" >
<a class="nav-link dropdown-toggle" data-toggle="dropdown">Page1</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Page1.1</a>
</div>
</li>
<li><a class="nav-link" href="#">Page2</a></li>
</ul>
</nav>
Mais la liste déroulante ne fonctionne pas avec Angular 6. J'ai utilisé la méthode suivante pour utiliser Bootstrap avec Angular:
ng add @ng-bootstrap/schematics
Et tout fonctionne bien sauf pour cet élément de liste déroulante!
J'ai rencontré le même problème plus tôt et j'ai trouvé ce qui suit:
container
dans le bootstrap comme indiqué dans Bootstrap LayoutPopper.js
comme indiqué dans Bootstrap DropdownD'après ce que je sais de votre problème, vous ne vous êtes pas référé à la javascript
requise, c'est-à-dire util.js, bootstrap.js, popper.js
ou à la version simplifiée.
Ici, je n'ai rien fait beaucoup, il suffit de se référer aux fichiers javascript requis dans le fichier d'index
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
Et j'ai créé un composant de navigation et un design comme requis comme ceci:
<div class="container">
<!-- Content here -->
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</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>
</div
La démo de travail peut être trouvée ici . J'espère que cela vous aide.
J'ai rencontré le même problème d'amorçage, mais j'ai la solution… .. Si vous utilisez Angular 6, inutile d'ajouter Popper.js pour l'amorçage. Vous devez ajouter bootstrap 4 puis ajouter rxjs-compat .
npm install rxjs-compat
Et ajoutez ngx-bootstrap pour effectuer une action déroulante. Installez le ngx-bootstrap,
npm install ngx-bootstrap --save
maintenant, nous devons ajouter le module de liste déroulante de ngx-bootstrap dans votre application en utilisant le code suivant
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
import { TooltipModule } from 'ngx-bootstrap/tooltip';
import { ModalModule } from 'ngx-bootstrap/modal';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
CommonModule,
BsDropdownModule.forRoot(),
TooltipModule.forRoot(),
ModalModule.forRoot()
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
puis j'ai fait quelques changements dans votre code et ça fonctionne très bien pour moi.
<nav class="navbar navbar-default">
<ul class="nav navbar-nav">
<li class="dropdown" dropdown >
<a dropdownToggle role="button"> <!-- {2} -->
Page1<span class="caret"></span></a>
<div *dropdownMenu class="dropdown-menu">
<a class="dropdown-item" href="#">Page1.1</a>
</div>
</li>
<li><a class="nav-link" href="#">Page2</a></li>
</ul>
</nav>
Voici...
J'ai fait ci-dessous des changements -
1. app.component.html
<p> Start editing to see some magic happen :) </p> <nav class="navbar bg-light navbar-light navbar-expand"> <ul class="nav navbar-nav"> <li class="dropdown" appDropdown> <a href="#" class="dropdown-toggle" role="button">Page1</a> <ul class="dropdown-menu"> <li><a href="#">Page1.1</a></li> <li><a href="#">Page1.2</a></li> <li><a href="#">Page1.3</a></li> </ul> </li> <li><a class="nav-link" href="#">Page2</a></li> </ul> </nav>
2. app.module.ts
J'ai ajouté une directive pour écouter l'événement de clic pour la liste déroulante, puis importé de la même manière dans app.module.ts.
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';
import { DropdownDirective } from './dropdown.directive';
@NgModule({
imports: [ BrowserModule, FormsModule ],
declarations: [ AppComponent, HelloComponent, DropdownDirective ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
3. dropdown.directive.ts
Directive ajoutée pour écouter l'événement click
import { Directive, HostListener, ElementRef, Renderer2 } from "@angular/core";
@Directive({
selector: '[appDropdown]'
})
export class DropdownDirective {
manageDropdown : boolean = false;
constructor(private elementRef: ElementRef, private renderer: Renderer2) {
}
@HostListener('click') openDropdown(eventData: Event) {
if(!this.manageDropdown) {
this.renderer.addClass(this.elementRef.nativeElement,'open');
this.manageDropdown = !this.manageDropdown;
} else {
this.renderer.removeClass(this.elementRef.nativeElement, 'open');
this.manageDropdown = !this.manageDropdown;
}
}
}
4. angular.json
Vous demandant de faire "npm install --save bootstrap @ 3" et d'effectuer les modifications ci-dessous dans le fichier angular.json.
"styles": [
"src/styles.css",
"../node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [
"../node_modules/bootstrap/dist/js/bootstrap.min.js"
]
Note - Pour votre référence s'il vous plaît visitez reference link. Vous pouvez voir la démo déroulante.
La réponse de @Rushikesh Salunke est excellente, mais à l'époque, je l'utilisais déjà. J'utilisais déjà la bibliothèque @ ng-bootstrap, pas ngx, et c'est ce que j'ai trouvé dans docs .
Commencez par importer le module NgbDropdown dans le composant que vous souhaitez utiliser.
import { NgbDropdown} from '@ng-bootstrap/ng-bootstrap';
Puis modifiez votre fichier .html comme suit:
<div ngbDropdown class="d-inline-block">
<button class="btn btn-outline-primary" id="dropdownBasic1" ngbDropdownToggle>Toggle dropdown</button>
<div ngbDropdownMenu aria-labelledby="dropdownBasic1">
<button class="dropdown-item">Action - 1</button>
<button class="dropdown-item">Another Action</button>
<button class="dropdown-item">Something else is here</button>
</div>
</div>
Vous pouvez voir d'autres cas d'utilisation ici .