Bootstrap dropdown-Liste mit Eckigen 6
Ich versuche zum erstellen eines dropdown-Elements in einem Bootstrap navbar mit Winkel-6. Mein code funktioniert, wenn ich es testen online :
<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>
Aber die dropdown funktioniert nicht mit Winkel-6. Ich habe die folgende Methode, um die Verwendung von Bootstrap mit Eckigen :
ng add @ng-bootstrap/schematics
Und alles funktioniert gut, außer für das dropdown-Element !
- Können Sie mir bitte sagen, welche version von bootstrap verwenden Sie?
- Auch das Sie dazu auffordert, fügen Sie bitte "node_modules/bootstrap/dist/css/bootstrap.min.css" innere Stile-array in eckigen.json-Datei
- Sie können versuchen, eckig dropdown anstelle von bootstrap. Können Sie bitte den folgenden link. Es ist multi-funktional npmjs.com/package/@ng-select/ng-select
InformationsquelleAutor krirkrirk | 2018-06-24
Schreibe einen Kommentar Antworten abbrechen
Du musst angemeldet sein, um einen Kommentar abzugeben.
Ich stieß auf das gleiche problem früher, und ich fand, wie unten:
container
im bootstrap wie bereits in Bootstrap LayoutPopper.js
wie bereits in Bootstrap DropdownSoweit ich weiß von Ihrem problem, dass Sie nicht beziehen sich auf die erforderlichen
javascript
d.h.util.js, bootstrap.js, popper.js
oder minified-version.Hier, ich habe nichts getan, viel, nur beziehen sich die benötigten javascript-Dateien in die index-Datei
Und habe ich eine nav-Komponente und design wie dieses:
Den arbeiten demo finden Sie hier. Hoffe, dies hilft Ihnen.
Ich habe vor dem gleichen Problem von bootstrap, aber ich hab die Lösung.
Wenn Sie Winkel-6, dann keine Notwendigkeit zum hinzufügen von popper.js für bootstrap. Man muss hinzufügen, bootstrap 4 und fügen Sie rxjs-compat.
Und fügen Sie ngx-bootstrap ausführen dropdown-Aktion. Installieren Sie die ngx-bootstrap,
nun müssen wir hinzufügen, die dropdown-Modul von ngx-bootstrap in Ihrer Anwendung mit dem folgenden code
dann habe ich einige änderungen in Ihrem code und es funktioniert gut für mich.
rxjs-compat
? bei mir funktionierte es ohne.Hier gehen Sie...
Habe ich unten verpasst -
1. app.component.html
2. app.- Modul.ts
Habe ich Hinzugefügt, eine Richtlinie zu hören click-Ereignis für die dropdown-und importiert im gleichen app.- Modul.ts
3. dropdown-Menü.Richtlinie.ts
Hinzugefügt-Richtlinie zu hören, klicken Sie auf Ereignis
4. eckig.json
In der Sie aufgefordert werden, zu tun, "npm install --save-bootstrap@3", und führen Sie unter änderungen in eckige.json-Datei.
Beachten Sie - Für Ihre Referenz, bitte besuchen Sie Referenz link. Sehen Sie die dropdown-demo.
Die Antwort von @Rushikesh Salunke ist toll, aber zu der Zeit sah ich es ich war ja schon mit @ng-bootstrap-Bibliothek, nicht die ngx, und das ist, was ich gefunden von der docs.
Importieren Sie zuerst die NgbDropdown Modul in der Komponente, die Sie möchten, es zu benutzen.
Dann ändern Sie Sie .html, wie es folgt:
Können Sie andere Anwendungsfälle hier.