wie Bootstrap Drop-Down in angular2 Anwendung verwenden

Question

In meinem aktuellen Projekt möchte ich die Dropdowns hinzufügen, dafür nahm ich den Code von diesem link. Nachdem der folgende Code hinzugefügt wurde, erscheint das Dropdown-Menü wie im Beispiel, aber wenn ich darauf klicke, passiert nichts.

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

ich die Bootstrap-Version als 3.3.7 verwendet, und fügte hinzu, die folgenden Zeilen in meinem 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> 

Können Sie mir bitte sagen, wie in Winkel 2 Projekt Bootstrap-Dropdown-Liste verwenden ?

Pradeep

Answer 1

NGX-Bootstrap ist für Angular Projekt zur Verfügung. (Oben Version 2).

Hier Link: http://valor-software.com/ngx-bootstrap/#/dropdowns

Sie es auf Ihrem Projekt verwenden können.

Anleitung

tun npm install ngx-bootstrap --save

Import Dropdown-Modul

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