Question

我无法弄清楚如何使用ng-boostrap。我找到了一些示例，说明如何使用 alert 指令。我得到了各种错误。

在我的AppModule中我有：

import { NgbAlertModule } from 'ng-bootstrap';

...

imports: [ NgbAlertModule, ... ]

我有一个HTML包含的组件：

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

我收到以下错误：

模板解析错误：'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>

关于导入，我建议您浏览Getting started指南。

基本上，导入行如下：

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

然后，根据您是否在根模块（很可能是AppModule）或其他模块中导入它，导入声明会略有不同。在根模块中它应该是NgbModule.forRoot()，而在其他模块中它只是NgbModule。

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