ng-bootstrap ngbDropdown 不工作 Angular 4答案

【问题标题】：ng-bootstrap ngbDropdown not working Angular 4ng-bootstrap ngbDropdown 不工作 Angular 4
【发布时间】：2018-09-26 17:52:18
【问题描述】：

ng 下拉菜单不起作用。

注意：我按照答案 here 并将引导程序升级到 4-alpha，但它不起作用。

下面是我的 package.json 文件：

    "@angular/animations": "^4.3.0",
    "@angular/common": "^4.3.0",
    "@angular/compiler": "^4.3.0",
    "@angular/core": "^4.3.0",
    "@angular/forms": "^4.3.0",
    "@angular/http": "^4.3.0",
    "@angular/platform-browser": "^4.3.0",
    "@angular/platform-browser-dynamic": "^4.3.0",
    "@angular/router": "^4.3.0",
    "@angular/upgrade": "^4.3.0",
    "@ng-bootstrap/ng-bootstrap": "^1.0.0-alpha.28",
    "@types/jquery": "^3.2.8",
    "angular-calendar": "^0.19.0",
    "angular2-ladda": "^1.2.1",
    "angular2-text-mask": "^8.0.2",
    "angular2-toaster": "^4.0.1",
    "animate.css": "^3.5.2",
    "bootstrap": "4.0.0-alpha.6"

html代码：

<div ngbDropdown class="d-inline-block">
                <button class="btn btn-outline-primary nav-link dropdown-toggle" id="dropdownBasic1" ngbDropdownToggle>More Actions..</button>
                <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownBasic1">
                    <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>

在我的 app.module.ts 中也导入了 ngbModule。

import {NgbModule} from "@ng-bootstrap/ng-bootstrap";

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    NgbModule.forRoot()
//more
]

引导按钮和文本输入正常工作，所有样式均已应用，但下拉菜单在点击时不起作用。

非常感谢任何意见。

【问题讨论】：

你确定 jquery 有作为参考吗？
您的组件是在 app.module.ts 中声明还是在单独的模块中声明？如果它是一个单独的模块，您还需要导入和导出 NgbModule。
@Aravind 是的，它在 package.json 中
@HaveSpacesuit 我的组件在一个单独的模块中，是的，我将 Ngb 添加到该模块有效！谢谢。你能告诉我为什么它在导入到 root 时没有应用于其他模块吗？对不起，我对 ng 很陌生。
@Maddy 使用 Angular，您必须在要使用这些指令的每个模块中导入指令。

标签： angular bootstrap-4 ng-bootstrap

【解决方案1】：

NgbModule 也必须在单独的模块中导入。致谢：HaveSpacesuit

【讨论】：

【解决方案2】：

添加您使用的 ngb 模块，必须导入 NgbModule....

@NgModule({
  imports: [
        ..,
        NgbModule.forRoot()
   ],
  ...

【讨论】：

【解决方案3】：

@麦迪只需对您的 html 代码进行一些小改动：

<div ngbDropdown class="d-inline-block">
                <button class="btn btn-outline-primary nav-link dropdown-toggle" id="dropdownBasic1" ngbDropdownToggle>More Actions..</button>
                <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownBasic1" 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 中的属性。

【讨论】：