angular2 응용 프로그램에서 부트 스트랩 드롭 다운을 사용하는 방법

Question

내 현재 프로젝트에서 드롭 다운을 추가하고 싶습니다.이 코드는 link에서 가져 왔습니다. 아래 코드를 추가 한 후에 드롭 다운이 예제와 같이 나타나지만 클릭하면 아무 일도 발생하지 않습니다.

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

내가 3.3.7로 부트 스트랩 버전을 사용하고, 내 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> 

를 어떻게 각 2 프로젝트에 부트 스트랩 드롭 다운을 사용하여 말해 주시겠습니까 ?

프라 딥

Answer 1

NGX-부트 스트랩은 각도 프로젝트에 사용할 수 있습니다. (버전 2 이상). 당신은 당신의 프로젝트에 사용할 수 있습니다 http://valor-software.com/ngx-bootstrap/#/dropdowns

: 여기

는 링크입니다.

지침

이 npm install ngx-bootstrap --save

가져 오기 드롭 다운 모듈을 [여기]

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