Question

0

197

Views

El menú desplegable Bootstrap 5 no funciona en Angular 12

Estoy tratando de agregar el menú desplegable Bootstrap 5 en Angular 12, no funciona.

Instalé todos los paquetes necesarios, los agregué al archivo angular.json .

Copié el ejemplo exacto de los documentos de Bootstrap 5 que aún no funciona.

En angular.json he dado

 "styles": [ "node_modules/bootstrap/dist/css/bootstrap.min.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" ]

A continuación se muestra mi código HTML (igual que en los documentos de Bootstrap 5)

 <div class="dropdown"> <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data- bs-toggle="dropdown" aria-expanded="false"> Dropdown button </button> <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1"> <li><a class="dropdown-item" href="#">Action</a></li> <li><a class="dropdown-item" href="#">Another action</a></li> <li><a class="dropdown-item" href="#">Something else here</a></li> </ul> </div>

Usé el comando npm i para instalar los paquetes sin mencionar ningún nombre de versión, así que supongo que se instaló la última versión. Instalado jQuery como último recurso leído en algún lugar Bootstrap 5 no requiere jQuery. Cualquier ayuda es muy apreciada.

almost 3 years ago · Juan Pablo Isaza

2 answers

Answer question

0

Agregue data-bs-toggle="dropdown" a un enlace o botón para alternar un menú desplegable

Consulte la documentación de arranque para obtener más información.

almost 3 years ago · Juan Pablo Isaza Report

Answer question

Find remote jobs

Accepted Answer · 2022-08-31T07:12:56.403Z

SegúnBootstrap 5 (sección separada) , Bootstrap 5 requiere @popperjs/core pero no popperjs . Por lo tanto, estaba instalando e importando la biblioteca incorrecta.

FYI, Bootstrap 5 eliminó la dependencia de jQuery .

Solución 1: Instale @popperjs/core

Requisito previo : ha instalado Bootstrap 5 con

 npm install bootstrap@5

Debe instalar @popperjs/core como dependencias. Vía npm

 npm install @popperjs/core

Importe @popperjs/core en angular.json . Popper (biblioteca) debe ir primero (si está utilizando información sobre herramientas o ventanas emergentes) y luego nuestros complementos de JavaScript.

angular.json

 "scripts": [ "./node_modules/@popperjs/core/dist/umd/popper.min.js", "./node_modules/bootstrap/dist/js/bootstrap.min.js" ]

Solución 2: importar Bootstrap como paquete

Requisito previo : ha instalado Bootstrap 5 con

 npm install bootstrap@5

El paquete Bootstrap incluye Popper para nuestra información sobre herramientas y popovers. Por lo tanto, no necesita instalar @popperjs/core separado.

Importe el paquete Bootstrap a la matriz de scripts angular.json .

angular.json

 "scripts": [ "./node_modules/bootstrap/dist/js/bootstrap.bundle.min.js" ]

Solución 3: Bootstrap angular

Angular Bootstrap Dropdown es otra opción que hace que Bootstrap funcione en la aplicación Angular.

Instalar Bootstrap Angular (NG Bootstrap) .

 npm install @ng-bootstrap/ng-bootstrap

Agregue NgbModule en la sección de importaciones de app.module.ts.

 import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; @NgModule({ imports: [.., NgbModule] })

Aplique la directiva desplegable de Bootstrap angular.

 <div ngbDropdown class="dropdown"> <button ngbDropdownToggle class="btn btn-secondary" type="button" id="dropdownMenuButton1" aria-expanded="false"> Dropdown button </button> <ul ngbDropdownMenu aria-labelledby="dropdownMenuButton1"> <li><a ngbDropdownItem href="#">Action</a></li> <li><a ngbDropdownItem href="#">Another action</a></li> <li><a ngbDropdownItem href="#">Something else here</a></li> </ul> </div>

Solución de muestra 3 en StackBlitz

0

197