[英]ng-bootstrap ngbDropdown not working in angular 4
At my angular 4 application is the ngbDropdown-Element from ng-bootstrap not working. 在我的角度4应用程序是ng-bootstrap的ngbDropdown-Element无法正常工作。
I have installed the following npm modules for this case: 我为这种情况安装了以下npm模块:
"@ng-bootstrap/ng-bootstrap": "^1.0.0-alpha.22", "bootstrap": "4.0.0-alpha.6", "bootstrap-sass": "^3.3.7",
My app.module.ts is looking like this: 我的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 { }
And in the CCA Campaign I am trying to use the Demo of ng-bootstrap: 在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>
But the result of this code is unfortunately very bad: 但遗憾的是,这段代码的结果非常糟糕:
and nothing happens when I click on it ... 当我点击它时没有任何反应......
@Philipp Just make a minor change to your HTML code: @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 is property added to "dropdown-menu" div.
ngbDropdownMenu是添加到“dropdown-menu”div的属性。
tl;dr; TL;博士; install Bootstrap 4 CSS.
安装Bootstrap 4 CSS。
ng-bootstrap requires Bootstrap 4 as documented on the "Getting Started" page . ng-bootstrap需要Bootstrap 4,如“入门”页面所述 。 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-sass": "^3.3.7"
所以看起来你正在混合Bootstrap版本,并且可能正在有效地使用Bootstrap 3。
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 使用Bootstrap 4 CSS可以很好地完成演示页面上显示的内容(以及可以从中进行分析的掠夺者): https ://ng-bootstrap.github.io/#/components/dropdown
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.