如何在angular2应用程序中使用Bootstrap下拉菜单

在我当前的项目中，我想添加下拉菜单，因为我从这个link中获取了代码。添加下面的代码后，下拉菜单出现在示例中，但是当我单击它时没有任何反应。如何在angular2应用程序中使用Bootstrap下拉菜单

<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项目？

Pradeep

来源

2017-05-02 pradeep

参见[这里]（https://stackoverflow.com/a/34736563/2448440）获得一个想法如何将代码分离成单独的角度分量。 – Qw3ry

ngx-bootstrap可用于Angular Project。（高于版本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>

来源

2017-05-02 09:06:53 blackiii

我在package.json中添加了ngx-bootstrap依赖项，但仍面临同样的问题。 – pradeep

您是否遵照指示？或者你可以分享任何闯入者？那么它会很棒。 – blackiii

实际上bootstrap和ngx-bootstrap有点不同。我将编辑答案。 – blackiii

如何在angular2应用程序中使用Bootstrap下拉菜单

回答

相关问题