使用 ng2-bootstrap 时，没有将 "exportAs" 设置为 "bs-modal" 的指令

Question

我正在按照此处给出的示例进行操作 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>

根据指南，我不必向我的组件导入任何东西

Answer 1

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

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

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

Answer 2

您缺少 ModalDirective。

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

Answer 3

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

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

Answer 4

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

ModalModule.forRoot()

确保您导入的是正确的。

正确导入

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

导入错误

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

使用 ng2-bootstrap 时，没有将 "exportAs" 设置为 "bs-modal" 的指令

There is no directive with "exportAs" set to "bs-modal" when using ng2-bootstrap

angularjs

typescript

angular2-template

ng2-bootstrap

angular