ng-bootstrap的ngbDropdown在Angular 4中无法工作

Question

ng下拉菜单不起作用。

注意：我遵循这里的答案，并将bootstrap升级到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
]

Bootstrap 按钮和文本输入框已经正常工作，并且应用了所有的样式，除了下拉菜单无法在点击时正常工作。

非常感谢任何意见或建议。

- Maddy

---

你确定引用了jQuery吗？ - Aravind

你的组件是在 app.module.ts 中声明还是在单独的模块中？如果它是在单独的模块中，你需要导入并导出 NgbModule。 - HaveSpacesuit

@Aravind 是的，它在package.json中。 - Maddy

@HaveSpacesuit 我的组件在一个单独的模块中，我将Ngb添加到该模块中，可以了！谢谢。你能告诉我为什么当它被导入到根时没有应用于其他模块吗？很抱歉，我对ng还比较新。 - Maddy

@Maddy 在 Angular 中，你必须在每个想要使用这些指令的模块中导入指令。 - pkozlowski.opensource

Answer 1

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

- Maddy

Answer 2

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

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

- mykil

Answer 3

@Maddy 只需对您的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 是添加到“dropdown-menu” div 的属性。

- Yuvraj Chauhan

Answer 4

在最新版本的ng-bootstrap中，要么将NgbDropdownModule导入模块中，要么将更全面的NgbModule导入页面的模块中。

- Paul F. Wood