javascript - 尝试在 Angular 2 应用程序上输入模态时出错

Question

我正在尝试在 Angular 2 应用程序中插入模式，但出现以下错误:

Unhandled Promise rejection: Template parse errors: Can't bind to 'showDismiss' since it isn't a known property of 'modal-header'.

我正在使用 ng2-bs3-modal 插件。我觉得我在插件的设置上遗漏了一些东西。

我已经在我的 index.html 上输入了这三行:

  <script src="node_modules/ng2-bs3-modal/bundles/ng2-bs3-modal.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
  <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>

我还将此代码粘贴到我的 systemconfig.js 上:

System.config({
    defaultJSExtensions: true,
    map: {
        'ng2-bs3-modal': 'node_modules/ng2-bs3-modal'
    },

我还在我的 app.module 上导入了 Ng2Bs3ModalModule。

这是我收到错误的组件的 html:

  <button type="button" class="btn btn-default" (click)="modal.open()">Open me!</button>
  <modal #modal>
    <modal-header [showDismiss]="true">
        <h4 class="modal-title">I'm a modal!</h4>
    </modal-header>
    <modal-body>
        Hello World!
    </modal-body>
    <modal-footer [showDefaultButtons]="true"></modal-footer>
</modal>

有人可以帮助我吗？提前致谢。任何其他使用模态的插件都会被接受，但我已经尝试了其中的大多数，并且我也设法在这些插件上遇到一些错误。

Answer 1

阅读文档，showDismiss <modal-header> 不存在。您必须使用show-close喜欢 <modal-header [show-close]="true"> 。不知道您是否使用其他版本？