没有使用 Angular Bootstrap 的 NgbDropdown 提供程序

Question

我试图在应用程序中使用 NbgDropdown，但出现以下错误：

NullInjectorError：NgbDropdown 没有提供程序！

我的 app.module 文件如下所示：

import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
...

NgModule({
    declarations: [
        ...
    ],
    imports: [
        ...
        NgbModule.forRoot()
    ],
    providers: [
        ...
    ],
    bootstrap: [AppComponent]
})

从其他答案来看，这看起来应该是必需的

我看到以下简短的评论可能会有所帮助，但对我来说没有意义：

/sf/answers/3264582121/

Answer 1

确保您的 HTML 标记具有ngbDropdownonngbDropdownToggle和ngbDropdownMenuparent属性。

<div ngbDropdown> <!-- **here** -->
  <button class="btn btn-outline-primary" 
      id="dropdownBasic1" ngbDropdownToggle>Toggle dropdown</button>
  <div ngbDropdownMenu>
    <button ngbDropdownItem>Action - 1</button>
    <button ngbDropdownItem>Another Action</button>
    <button ngbDropdownItem>Something else is here</button>
  </div>
</div>

Answer 2

正如@robert提供的，在官方示例中，问题是下拉菜单html不能直接位于app.component.html中。如果放置在那里，则会出现指定的错误。

我不确定将下拉菜单 html 放在自己的组件中是否是唯一的解决方案，但这是适合我的情况的工作和不工作之间的区别。我无法将 dropdown-basic.html 中找到的内容放入 app.component.html 中而不会遇到问题。

我建议 Angular Bootstrap 的作者将所需的用法直接放在文档中。就目前情况而言，还没有明确。官方示例只是作为使用代码的一种方式出现。