Question

我尝试了here给出的所有可能的解决方案，但仍然有这个错误。我正在使用Bootstrap 3和Angular 4.当我尝试使用它来显示模态时会发生这种情况：

$("#myModal").modal('show');

Answer 1

看看@ link。它有一个工作的例子和一个问题，与打字和没有它相同。我在该项目中使用了Angular的bootstrap和jquery，你也可以查看repo。

在您的情况下，您需要添加jquery文件

在你的 angular-cli.json

中这样

  "styles": [
    "../node_modules/bootstrap-v4-dev/dist/css/bootstrap.min.css",
    "styles.css"
  ],
  "scripts": [
    "../node_modules/jquery/dist/jquery.js",
    "../node_modules/tether/dist/js/tether.min.js",
    "../node_modules/bootstrap-v4-dev/dist/js/bootstrap.min.js"

然后在组件中声明。declare var $: any;

这应该有效。

<强>更新

我继续使用我提到的步骤在Angular中使用jquery创建一个bootstrap模式。

可行。请查看此gh页面链接 - LINK。

如果您想检查相同支票LINK的源代码。

我发布的答案来自此链接，这是我在Angular LINK

上的页面

Answer 2

听起来您没有以正确的方式将Bootstrap Javascript文件添加到Angular项目中。您应该做的是将文件添加到.angular-cli.json文件中。

"styles": [
  "styles.css",
  "../node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [
  "../node_modules/jquery/dist/jquery.min.js",
  "../node_modules/bootstrap/dist/js/bootstrap.min.js"
],

You can read more about it here

奖金提示

我不建议将jQuery与Angular混合使用，而是建议安装一个像ngx-bootstrap这样的库，它们将Bootstrap组件重写为Angular组件，这样可以更容易地与Angular的其余部分一起使用代码。

资源：

如何在Angular 4应用程序中使用Bootstrap 3 Modal？

2 个答案:

奖金提示