ng-bootstrap ngbDropdown 在 angular 4 中不起作用 [英] ng-bootstrap ngbDropdown not working in angular 4
问题描述
在我的 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"从@angular/core"导入 { NgModule };从@angular/forms"导入 { FormsModule };从@angular/http"导入 { HttpModule };import { AppComponent } from "./app.component";import { FileitHeaderComponent } from "./fileit-header/fileit-header.component";从ng2-translate"导入{TranslateModule};import { CCACampaignComponent } from "./cca-campaign/cca-campaign.component";从@ng-bootstrap/ng-bootstrap"导入 {NgbModule};@NgModule({声明: [应用组件,FileitHeader 组件,CCACampaign 组件],进口:[浏览器模块,表单模块,Http模块,TranslateModule.forRoot(),NgbModule.forRoot()],提供者:[],引导程序:[AppComponent]})导出类 AppModule { }
在 CCA 活动中,我尝试使用 ng-bootstrap 的演示:
<button class="btn btn-outline-primary" id="dropdownMenu1" ngbDropdownToggle>切换下拉菜单</button><div class="dropdown-menu" aria-labelledby="dropdownMenu1"><button class="dropdown-item">Action - 1</button><button class="dropdown-item">另一个操作</button><button class="dropdown-item">这里还有别的东西</button>
但不幸的是,这段代码的结果非常糟糕:
当我点击它时什么也没有发生......
tl;dr;安装 Bootstrap 4 CSS.
ng-bootstrap 需要 Bootstrap 4 如中所述入门"页面.出于某种原因,您有 "bootstrap-sass": "^3.3.7"
所以看起来您正在混合 Bootstrap 版本,并且可能正在有效地使用 Bootstrap 3.
使用 Bootstrap 4 CSS,一切正常,如演示页面所示(您可以从中派生出 plunkers):https://ng-bootstrap.github.io/#/components/dropdown
At my angular 4 application is the ngbDropdown-Element from ng-bootstrap not working.
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",
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 { }
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; install Bootstrap 4 CSS.
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.
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屋!