Question

是的，这个问题可能会重演。但我不能以任何方式使用此设置。

我尝试了很多东西：

通过CDN将库直接导入index.html。
通过NPM安装它们，然后将它们添加到angular-cli.json脚本字段。
将模块直接导入到我的组件中，两者都使用别名的JQuery（导入*作为来自＆＃39; jquery＆＃39;的$）和简单导入（导入＆＃39; jquery＆＃39;）。

我尝试了其他设置，例如在根组件中执行导入，在不同位置导入这些库...但我不能让它工作。

目前，我需要使用一个Bootstrap模式和一个也适用于JQuery的Datepicker组件，但这对我来说是不可能的。有时候我会得到＆＃39; $未定义＆＃39;有时我会得到其他错误。

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

谢谢！

编辑：现状：

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

＆＃34;样式＆＃34;：[ ＆＃34; styles.css的＆＃34 ;, ＆＃34; ../ node_modules /引导/ DIST / CSS / bootstrap.min.css＆＃34 ;, ＆＃34; ../ node_modules /字体真棒/ CSS /字体awesome.css＆＃34; ] ＆＃34;脚本＆＃34;：[ ＆＃34; ../ node_modules / jquery的/ DIST / jquery.min.js＆＃34 ;, ＆＃34; ../ node_modules /引导/ DIST / JS / bootstrap.bundle.min.js＆＃34; ]，
- 我尝试调用bootstrap必须添加到Jquery的.modal（）函数：
（$（＆＃39; #myModal＆＃39;））。modal（{ 背景：是的，焦点：是的，显示：是的 }）

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

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)

任何帮助？

Answer 1

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

所以我建议的是DOUBLE check your jquery path中的scripts :[] section

记住.. 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吗？ ...

希望它可以帮到你！

Answer 2

您需要使用包管理器或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"
],

确保这三个文件存在。

Answer 3

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

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

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

3 个答案: