Question

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

NullInjectorError：NgbDropdown没有提供程序！

我的app.module文件如下：

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

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

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

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

https://stackoverflow.com/a/46636887/2178363

Answer 1

确保您的HTML标记在ngbDropdown和ngbDropdownToggle父级上具有ngbDropdownMenu属性。

<div ngbDropdown> <!-- **here** -->
  <button class="btn btn-outline-primary" 
      id="dropdownBasic1" ngbDropdownToggle>Toggle dropdown</button>
  <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
    <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的NgbDropdown提供程序

2 个答案: