angular - Hvordan bruke Bootstrap drop-down i Angular2-applikasjon?

I mitt nåværende prosjekt ønsker jeg å legge til rullegardinmenyene, for det tok jeg koden fra denne linken. Etter å ha lagt til koden under, vises rullegardinmenyen som i eksemplet, men når jeg klikker på den skjer ingenting.

   <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>

Jeg brukte Bootstrap versjon 3.3.7, og la til følgende linjer i min 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>

Hvordan kan jeg bruke Bootstrap-dropdown i Angular 2-prosjekt?

Svar #1

ngx-bootstrap er tilgjengelig for Angular-prosjekter (versjon 2 og høyere).

Her er lenken: http://valor-software.com/ngx-bootstrap/#/dropdowns

Du kan bruke det på prosjektet ditt.

Instruksjoner

kjør npm install ngx-bootstrap --save

Importer rullegardinmodul

// 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>

Svar #2

For å bruke bootstrap dropdown i Angular må du legge til to klasser - en show-klasse på overordnet dropdown-element, dvs. dropdown, og en annen show-klasse på dens barn dropdown-menu.

For å gjøre det kan du enten lage en nedtrekkskomponent og sende en liste over verdier som et array til den med deres klikkhåndterere, eller lage en egendefinert direktiv.

Tilpasset dropdown-direktivtilnærming:

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');
    }
  }

}

Nå i malen, legg dette til ved bootstrap-rullegardin:

<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>

MERK - Denne løsningen er kun for Bootstrap 4 Dropdown. For Bootstrap 3 må du identifisere klassene som må legges til. Det må være open klasse kun på foreldrenivå.

Relaterte artikler