在 Angular App 中使用 Bootstrap .modal() JQuery 方法

Question

我有一些关于 Bootstrap 4 和 NPM/Angular CLI 的功能错误关于 .modal 方法

错误： TypeError: $(...).modal is not a function

main.ts：

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

app.components.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"
      ],

包.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; 在组件中（重要）

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

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

Answer 2

也许您的模态元素在您调用后正在呈现

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

尝试在文档就绪功能中使用您的脚本，例如

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

Answer 3

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

其次，您需要添加声明 var $ : any; 在组件中（重要）

并且使用可以使用 $('#myModal').modal('hide');