我不能调用jquery

Question

我试图在我的js文件(app.js(中调用jquery，这样我就可以在我的nav.js中使用jquery，但我在浏览器控制台中遇到了一个错误：

app.js:1479 Uncaught ReferenceError: $ is not defined
at eval (nav.js:4)
at Object../src/assets/script/nav.js (app.js:61)
at __webpack_require__ (app.js:1476)
at fn (app.js:1687)
at eval (app.js:2)
at Module../src/assets/app.js (app.js:41)
at __webpack_require__ (app.js:1476)
at app.js:2533
at app.js:2537

这是我的app.js:

import './script/nav.js';
import '../../node_modules/jquery/dist/jquery';

这是我的nav.js

console.log("test");
// Close all items when a current item is open
$('.nav-link > button').on('click', function (e) {
var EltToToggle = $(this).next('.nav-collapse');
var notToHide = $(this).parents('.nav-link').find('.nav-collapse');
$(".nav-collapse").not(EltToToggle).removeClass("show");
// aria-expanded toggle
if ($(this).attr('aria-expanded') === "false") {
$(this).attr('aria-expanded', true);
$('.nav-collapse').prev().attr('aria-expanded', false);
}
else if ($(this).attr('aria-expanded') === "true") {
$(this).attr('aria-expanded', false);
}
});

Answer 1

确保在angular.json:中添加了如下jquery

"projects": {
"clientApp": {
"architect": {
"build": {
"scripts": [
"./node_modules/jquery/dist/jquery.min.js"
]
}
}
}
}

或者你可以直接在index.html中添加脚本

Answer 2

in nav.js file add "declare var $" as shown below;
declare var $;
console.log("test");
// Close all items when a current item is open
$('.nav-link > button').on('click', function (e) {
var EltToToggle = $(this).next('.nav-collapse');
var notToHide = $(this).parents('.nav-link').find('.nav-collapse');
$(".nav-collapse").not(EltToToggle).removeClass("show");
// aria-expanded toggle
if ($(this).attr('aria-expanded') === "false") {
$(this).attr('aria-expanded', true);
$('.nav-collapse').prev().attr('aria-expanded', false);
}
else if ($(this).attr('aria-expanded') === "true") {
$(this).attr('aria-expanded', false);
}
});