En mi proyecto actual, quiero agregar los menús desplegables, para eso tomé el código de este enlace . Después de agregar el siguiente código, el menú desplegable aparece como en el ejemplo, pero cuando hago clic en él, no sucede nada.
<li class="dropdown"> <a [routerLink]="['/frontendai']" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Application Insights <span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li><a [routerLink]="['/frontendai']">FrontEnd AI</a></li> <li class="divider"></li> <li><a [routerLink]="['/apiai']">API AI</a></li> <li class="divider"></li> <li><a [routerLink]="['/apiai']">SQL Exception</a></li> </ul> </li>Usé Bootstrap versión 3.3.7 y agregué las siguientes líneas en mi index.cshtml
<link href="node_modules/bootstrap/dist/css/bootstrap.css" rel="stylesheet" /> <link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" /> <script src="~/node_modules/bootstrap/dist/js/bootstrap.min.js"></script>¿Cómo puedo usar el menú desplegable Bootstrap en el proyecto Angular 2?
ngx-bootstrap está disponible para Angular Project (versión superior a la 2).
Aquí hay un enlace: http://valor-software.com/ngx-bootstrap/#/dropdowns
Puedes usarlo en tu proyecto.
Instrucciones
haz npm install ngx-bootstrap --save
Módulo desplegable de importación
// RECOMMENDED (doesn't work with system.js) import { BsDropdownModule } from 'ngx-bootstrap/dropdown'; // or import { BsDropdownModule } from 'ngx-bootstrap'; @NgModule({ imports: [BsDropdownModule.forRoot(),...] }) export class AppModule(){} <div class="btn-group" dropdown> <button dropdownToggle type="button" class="btn btn-primary dropdown-toggle"> Button dropdown <span class="caret"></span> </button> <ul *dropdownMenu class="dropdown-menu" role="menu"> <li role="menuitem"><a class="dropdown-item" href="#">Action</a></li> <li role="menuitem"><a class="dropdown-item" href="#">Another action</a></li> <li role="menuitem"><a class="dropdown-item" href="#">Something else here</a></li> <li class="divider dropdown-divider"></li> <li role="menuitem"><a class="dropdown-item" href="#">Separated link</a> </li> </ul> </div>Para usar el menú desplegable de arranque en angular, necesita agregar dos clases: una clase de espectáculo en el elemento desplegable principal, es decir, menú desplegable y otra clase de espectáculo en su menú desplegable secundario.
Para hacer eso, puede crear un componente desplegable y pasarle una lista de valores como una matriz con sus controladores de clic o crear una directiva personalizada.
Enfoque de directiva desplegable personalizado:
import { Directive, ElementRef, HostListener } from '@angular/core'; @Directive({ selector: '[appDropdown]' }) export class DropdownDirective { constructor(private el: ElementRef) { } //Binding click to Add show class @HostListener('click') onclick() { var parent = this.el.nativeElement;//parent element parent.classList.toggle('show'); var child = [].filter.call(this.el.nativeElement.children, function(ele) { return ele.classList.contains('dropdown-menu'); }); //Identify the child element on dropdown clicked- dropdwon menu if(child.length) { child[0].classList.toggle('show'); } } }Ahora, en la plantilla, adjunte esto en el menú desplegable de arranque:
<li class="nav-item dropdown" appDropdown> <a class="nav-link dropdown-toggle" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Username </a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item" >Profile 2</a> <a class="dropdown-item" >Logout 2</a> </div> </li>NOTA : esta solución es solo para Bootstrap 4 Dropdown, para Boostrap 3 debe identificar las clases que deben adjuntarse. Debe ser una clase abierta solo a nivel de padres.