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

以防万一，如果您在此线程上，因为即使将以下行添加到NgModule，也会遇到相同的错误

ModalModule.forRoot()

确保您的导入是正确的。

正确导入

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

导入错误

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

Answer 4

您缺少ModalDirective。

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

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

4 个答案: