无法配置ng-bootstrap

Question

我不知道如何使用ng-boostrap。 我发现了几个示例，这些示例说明了如何使用alert指令。 我遇到各种错误。

在我的AppModule中，我有：

import { NgbAlertModule } from 'ng-bootstrap';

...

imports: [ NgbAlertModule, ... ]

我有一个其HTML包含的组件：

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

我收到以下错误：

模板解析错误：“警报”不是已知元素

在执行上述操作之前，我尝试导入Alert或AlertModule（如大多数示例所建议的），但始终收到一个错误，指出不存在这样的导出成员。 我可以进行导入的唯一方法是指定NgbAlertModule。

我很困扰。 首先，我不明白为什么所有示例都希望将导入内容放入AppModule中。 这仅仅是为了简化示例吗？ 对我来说，将其放入需要它的组件中更有意义。 能做到吗 如果是这样，那又如何？ 这是最佳做法吗？

我不明白要输入什么。 我了解它正在寻找模块，但是在哪里？ 我发现的大多数示例都说要导入AlertModule或Alert。 有什么区别？ 我无法使它们中的任何一个正常工作，但是发现我可以成功导入NgbAlertModule，但是它似乎没有包含。

任何帮助表示赞赏。

Answer 1

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

some.component.ts

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

关于进口，我建议您阅读入门指南。

基本上，导入行如下：

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

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

请注意， NgbModule是主要模块，包含所有其他模块（ NgbAlertModule ， NgbModalModule ，...）。 如果不使用其他模块，则可以使用NgbAlertModule进行上述操作。