ng-bootstrap ngbDropdown在angular 4中不起作用 [英] ng-bootstrap ngbDropdown not working in angular 4

问题描述

在我的angular 4应用程序中，ng-bootstrap中的ngbDropdown-Element无法正常工作.

At my angular 4 application is the ngbDropdown-Element from ng-bootstrap not working.

在这种情况下，我已经安装了以下npm模块:

I have installed the following npm modules for this case:

"@ng-bootstrap/ng-bootstrap": "^1.0.0-alpha.22", "bootstrap": "4.0.0-alpha.6", "bootstrap-sass": "^3.3.7",

"@ng-bootstrap/ng-bootstrap": "^1.0.0-alpha.22", "bootstrap": "4.0.0-alpha.6", "bootstrap-sass": "^3.3.7",

我的app.module.ts看起来像这样:

My app.module.ts is looking like this:

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演示:

And in the CCA Campaign I am trying to use the Demo of 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>

但是不幸的是，这段代码的结果非常糟糕:

But the result of this code is unfortunately very bad:

当我单击它时什么也没发生...

and nothing happens when I click on it ...

推荐答案

tl; dr;安装Bootstrap 4 CSS.

tl;dr; install Bootstrap 4 CSS.

ng-bootstrap 需要所述入门"页面.出于某种原因，您有了"bootstrap-sass": "^3.3.7"，因此您似乎在混合使用Bootstrap版本，并且可能有效地使用了Bootstrap 3.

ng-bootstrap requires Bootstrap 4 as documented on the "Getting Started" page. For some reason you've got "bootstrap-sass": "^3.3.7" so it looks like you are mixing Bootstrap versions and might be using Bootstrap 3, effectively.

使用Bootstrap 4 CSS可以正常工作，如演示页上所示(您可以从其插入插件):

With the Bootstrap 4 CSS things work perfectly fine as shown on the demo page (and plunkers you can fork from it): https://ng-bootstrap.github.io/#/components/dropdown

这篇关于ng-bootstrap ngbDropdown在angular 4中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！