在我的角度4应用程序是ng-bootstrap的ngbDropdown-Element无法正常工作.
我为这种情况安装了以下npm模块：
“@ ng-bootstrap / ng-bootstrap”：“^ 1.0.0-alpha.22”,
“bootstrap”：“4.0.0-alpha.6”,
“bootstrap-sass”：“^ 3.3.7”,
我的app.module.ts看起来像这样：
import { BrowserModule } from "@angular/platform-browser"
import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { HttpModule } from "@angular/http";
import { AppComponent } from "./app.component";
import { FileitHeaderComponent } from "./fileit-header/fileit-header.component";
import {TranslateModule} from "ng2-translate";
import { CCACampaignComponent } from "./cca-campaign/cca-campaign.component";
import {NgbModule} from "@ng-bootstrap/ng-bootstrap";
@NgModule({
declarations: [
AppComponent,FileitHeaderComponent,CCACampaignComponent
],imports: [
BrowserModule,FormsModule,HttpModule,TranslateModule.forRoot(),NgbModule.forRoot()
],providers: [],bootstrap: [AppComponent]
})
export class AppModule { }
在CCA Campaign中我试图使用ng-bootstrap的演示：
<div ngbDropdown class="d-inline-block">
<button class="btn btn-outline-primary" id="dropdownMenu1" ngbDropdownToggle>Toggle dropdown</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenu1">
<button class="dropdown-item">Action - 1</button>
<button class="dropdown-item">Another Action</button>
<button class="dropdown-item">Something else is here</button>
</div>
</div>
但遗憾的是,这段代码的结果非常糟糕：
当我点击它时没有任何反应……
解决方法
TL;博士;安装Bootstrap 4 CSS.
ng-bootstrap需要Bootstrap 4,如“Getting Started” page所述.出于某种原因,你有“bootstrap-sass”：“^ 3.3.7”所以看起来你正在混合Bootstrap版本,并且可能正在有效地使用Bootstrap 3.
使用Bootstrap 4 CSS,如演示页面上显示的那样(和可以从中分叉的掠夺者)完全正常工作：https://ng-bootstrap.github.io/#/components/dropdown
