首页 文章

如何在最新的Angular版本中正确使用JQuery和Bootstrap

提问于
浏览 次
0

是的，这个问题可能会重复 . 但我只是没有让这个设置以任何方式工作 .

我尝试了很多东西：

  • 通过CDN将库直接导入index.html .

  • 通过NPM安装它们，然后将它们添加到angular-cli.json脚本字段中 .

  • 将模块直接导入到我的组件中，两者都使用别名的JQuery（import * as _ from 'jquery'）和plain import（import 'jquery'） .

我尝试了其他设置，比如在根组件中进行导入，在不同位置导入这些库......但是我没有这样做 .

目前，我需要使用一个Bootstrap模式和一个也适用于JQuery的Datepicker组件，但这对我来说是不可能的 . 有时我会得到'$ is undefined'，有时我会得到其他错误 .

所以现在，我会问：在最新的Angular版本中，这个问题的 real 解决方案是什么？我该如何进口？

谢谢！

编辑：现状：

  • 在angular-cli.json文件中添加了依赖项：

“styles”：[“styles.css”，“../ node_modules/bootstrap/dist/css/bootstrap.min.css”，“.. / node_modules / font-awesome / css / font-awesome.css”]， “scripts”：[“../ node_modules/jquery/dist/jquery.min.js","../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js”]，

  • 我尝试调用bootstrap必须添加到Jquery的.modal（）函数：

（$（'＃myModal'）） . modal（{backdrop：true，focus：true，show：true}）

但它只是抛出......：

SegmentsComponent.html:15 ERROR ReferenceError: $ is not defined
    at SegmentsComponent.openModal (segments.component.ts:55)
    at Object.eval [as handleEvent] (SegmentsComponent.html:15)
    at handleEvent (core.js:13255)
    at callWithDebugContext (core.js:14740)
    at Object.debugHandleEvent [as handleEvent] (core.js:14327)
    at dispatchEvent (core.js:9704)
    at eval (core.js:10318)
    at HTMLAnchorElement.eval (platform-browser.js:2614)
    at ZoneDelegate.invokeTask (zone.js:425)
    at Object.onInvokeTask (core.js:4620)

有帮助吗？

javascript jquery twitter-bootstrap angular

3 回答

  • 0

    mmmmm ..它看起来很奇怪..它能给你的唯一原因是$ $未定义 is because you DON'T INCLUDE IT well ..

    所以我建议你在 scripts :[] section 中 DOUBLE check your jquery path ..

    记住.. the path is intended from the src （或你的根：条目） folder ！

    还检查了jquery版本..我看到 NPM don't include jquery when you do install bootstrap ...所以手动安装jquery并获得正确的版本..

    在你的.ts文件中..你的ts文件头部有 declare var $ : any 吗？ ...

    希望它能帮到你！

    回复于
  • 0

    您需要使用包管理器或CDN安装Jquery和bootstrap（用于Bootstrap 4的popper） . 你的.angular-cli.json文件必须如下所示：

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

    确保这三个文件存在 .

    回复于
  • 0

    我找到了答案，它可以通过两种方法解决，一种是在index.html中包含js文件，或者你可以像这样包含，你也可以包括js和jquery .

    ngOnInit() {
$(document).ready(function () {
  $.getScript('../../assets/frontend/js/app.js', function (w) { });
}); }
    回复于

相关问题