ng-bootstrap ngbDropdown 在角度 4 中不起作用答案

【问题标题】：ng-bootstrap ngbDropdown not working in angular 4ng-bootstrap ngbDropdown 在角度 4 中不起作用
【发布时间】：2017-08-24 00:15:36
【问题描述】：

在我的 Angular 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 活动中，我正在尝试使用 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>

但不幸的是，这段代码的结果很糟糕：

当我点击它时没有任何反应......

【问题讨论】：

标签： angularjs twitter-bootstrap angular-ui-bootstrap ng-bootstrap angular4

【解决方案1】：

tl;博士;安装 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

【讨论】：

我已经安装了Bootstrap-4，看看我的package.json代码sn -p @pkozlowski.opensource
@PhilippJanuskovecz 您使用的是 bootstrap 还是 bootstrap-sass 中的 sass 文件？后者是 bootstrap 3（bootstrap 4 不再需要，因为 4 已经使用 sass）
@PhilippJanuskovecz 但由于某种原因你得到了"bootstrap-sass": "^3.3.7"......无论如何，问题很可能与你正在加载的CSS有关。如果不尝试在 plunker 中重现您的问题，您可以从这个开始：plnkr.co/edit/FZB6sR0gwX83BSYTEsk4?p=preview

【解决方案2】：

@菲利普只需对您的 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 是添加到“下拉菜单”div 中的属性。

【讨论】：