ng-bootstrap ngbDropdown在Angular 4中无法正常工作

Question

我的angular 4应用中，使用ng-bootstrap的下拉菜单元素（ngbDropdown）无法正常工作。

为了解决这个问题，我安装了以下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活动中，我尝试使用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>

但是这段代码的结果非常糟糕： 当我点击它时什么也不发生...

- Philipp Januskovecz

Answer 1

@Philipp 只需要对你的HTML代码进行微小的更改：

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

ngbDropdownMenu 是添加到“dropdown-menu” div的属性。

- Yuvraj Chauhan

Answer 2

简述：安装Bootstrap 4 CSS。

ng-bootstrap 要求使用 Bootstrap 4，详见 "Getting Started" page。但你使用了 "bootstrap-sass": "^3.3.7"，这样看起来你混合了Bootstrap版本，实际上正在使用Bootstrap 3。

如果使用Bootstrap 4 CSS，则可以像演示页面一样正常工作（您可以从中派生plunker）：https://ng-bootstrap.github.io/#/components/dropdown

- pkozlowski.opensource

---

我已经安装了Bootstrap-4，看一下我的package.json代码片段 @pkozlowski.opensource - Philipp Januskovecz

@PhilippJanuskovecz 你是在使用 Bootstrap 的 sass 文件还是 bootstrap-sass 的文件？后者是 Bootstrap 3（Bootstrap 4 已经使用了 sass，因此不再需要）。 - Paul Samsotha

@PhilippJanuskovecz 但出于某种原因，您使用了“bootstrap-sass”：“^3.3.7”...不管怎样，问题与您加载的CSS有关，最可能是这样。如果没有，请尝试在plunker中重现问题，您可以从此开始：http://plnkr.co/edit/FZB6sR0gwX83BSYTEsk4?p=preview - pkozlowski.opensource