使用 ng2-bootstrap 时，没有将“exportAs”设置为“bs-modal”的指令答案

【问题标题】：There is no directive with "exportAs" set to "bs-modal" when using ng2-bootstrap使用 ng2-bootstrap 时，没有将“exportAs”设置为“bs-modal”的指令
【发布时间】：2017-08-10 01:56:12
【问题描述】：

我按照这里给出的例子https://valor-software.com/ng2-bootstrap/#/modals

但是当我将模板放入我的 html 中时

<div class="modal fade" bsModal #staticModal="bs-modal" [config]="{backdrop: 'static'}"
     tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true"> 
.........
.......

</div>

我的 app.module.ts 中也有以下条目

import { ModalModule } from 'ng2-bootstrap';

@NgModule({
  imports: [ModalModule.forRoot(),...]
})

下面的消息出现了，我不确定我错过了什么

EXCEPTION: Uncaught (in promise): Error: Template parse errors:
There is no directive with "exportAs" set to "bs-modal" ("
</p-dialog>

<div class="modal fade" bsModal [ERROR ->]#staticModal="bs-modal" [config]="{backdrop: 'static'}"
     tabindex="-1" role="dialog" aria-labell"): PreCheckComponent@80:32
Can't bind to 'config' since it isn't a known property of 'div'. ("
</p-dialog>

根据指导，我不必将任何内容导入到我的组件中

【问题讨论】：

使用组件打字稿文件代码更新您的帖子
我刚刚添加了一些代码，如果您希望我添加任何其他内容，请告诉我
查看我的答案。如果需要更多帮助，请告诉我
实际上我无法导入 ModalDirective，它给了我错误

标签： angularjs angular typescript angular2-template ng2-bootstrap

【解决方案1】：

您的组件中一定缺少以下行

@ViewChild('staticModal') public staticModal:ModalDirective;

有关 ng2-bootstrap 模式的更多信息，您可以查看此 post，其中也包含演示。

【讨论】：

【解决方案2】：

您缺少 ModalDirective。

@ViewChild('yourModal') public YourModal:ModalDirective;

【讨论】：

【解决方案3】：

您需要在您的模块上导入 ngx-bootstrap 模态模块，如下所示：

import { ModalModule } from "ngx-bootstrap";
@NgModule({
  imports: [
    ModalModule.forRoot()
    ]
})

【讨论】：

ModalModule.forRoot() 的导入帮助了我。

【解决方案4】：

如果你在这个线程上，因为即使你在 NgModule 中添加了以下行，你也会遇到同样的错误

ModalModule.forRoot()

确保您的导入是正确的。

正确导入

import { ModalModule } from 'ngx-bootstrap/modal';

错误的导入

import { ModalModule } from 'ngx-bootstrap/modal/public_api';

【讨论】：