使用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模态的更多信息，你可以看到这个包含演示的post。

Answer 2

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

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

Answer 3

你缺少ModalDirective。

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