jquery - 在 Angular 应用程序中使用 Bootstrap .modal() JQuery 方法

Question

我在 Bootstrap 4 和 NPM/Angular CLI 的 .modal 方法方面遇到一些功能错误

错误:类型错误:$(...).modal 不是函数

main.ts:

import * as $ from 'jquery';
import * as bootstrap from 'bootstrap';

应用程序组件.ts:

import * as $ from 'jquery';
import * as bootstrap from 'bootstrap';

...

$('#new-product-modal').modal('hide');

app.component.html:

<div class="modal fade" id="new-product-modal" tabindex="-1" role="dialog" aria-labelledby="new-product-modal" aria-hidden="true">

.angular-cli.json:

"scripts": [
        "../node_modules/jquery/dist/jquery.min.js",
        "../node_modules/popper.js/dist/umd/popper.min.js",
        "../node_modules/bootstrap/dist/js/bootstrap.min.js"
      ],

package.json:

"bootstrap": "^4.0.0-beta.3",
...
"jquery": "^3.2.1",
...
"popper.js": "^1.12.9",

它不会在 Visual Studio Code 或 ng build/serve 命令中引发错误。但它会抛出控制台错误并且不会隐藏模式。模态的所有其他功能都按预期执行，例如 data-dismiss="modal"等。有什么想法吗？

Answer 1

第一步，您需要通过 npm 命令安装 jquery 和 bootstrap。

其次，您需要在组件中添加declare var $ : any;(重要)

并且可以在onSave()方法上使用$('#myModal').modal('hide');

演示 https://stackblitz.com/edit/angular-model-bootstrap-close?file=src/app/app.component.ts