无法配置 bootstrap

Cannot configure ng-bootstrap

我不知道如何使用 ng-boostrap。我找到了几个展示如何使用 alert 指令的示例。我收到各种错误。

在我的 AppModule 中我有:

import { NgbAlertModule } from 'ng-bootstrap';

...

imports: [ NgbAlertModule, ... ]

我有一个组件 HTML 包含:

<alert type="success">Alert works!</alert>

我收到以下错误:

Template parse errors: 'alert' is not a known element

在上述之前,我尝试导入 Alert 或 AlertModule(正如大多数示例所建议的那样),但总是出现错误,指出不存在此类导出成员。我可以让导入工作的唯一方法是指定 NgbAlertModule。

我很困惑。首先,我不明白为什么所有示例都希望将导入放在 AppModule 中。这只是为了简化示例吗?将它放在需要它的组件中对我来说更有意义。那可以吗?如果是这样,那又如何呢?这是最佳做法吗?

我不明白 import 在找什么。我知道它正在寻找一个模块,但是在哪里?我发现的大多数示例都说要导入 AlertModule 或 Alert。有什么不同?我无法使其中任何一个工作,但发现我可以成功导入 NgbAlertModule,但它似乎不包含 .

感谢任何帮助。

您需要做的第一件事是为 Alert 组件使用正确的选择器,它不是 alert 而是 ngb-alert:

some.component.ts

<ngb-alert type="success">Alert works!</ngb-alert>

关于导入,我建议您阅读 Getting started 指南。

基本上,导入行如下:

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

然后,根据您是将其导入根模块(最有可能 AppModule)还是其他模块,导入声明会略有不同。在根模块中它应该是 NgbModule.forRoot(),而在其他模块中它只是 NgbModule.

请注意,NgbModule 是主要模块,包含所有其他模块(NgbAlertModuleNgbModalModule、...)。如果您没有使用其他模块,则可以使用 NgbAlertModule 执行上述操作。