typescript 如何在 Angular 8 应用程序中使用 jQuery？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/56941924/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I use jQuery in an Angular 8 app?
提问by Irrelevant_Coder
I have an application that utilizes SignalR to communicate with a desktop application. To utilize SignalR I need to use jQuery in my .ts file. However, it doesn't seem to work post migrating from Angular 7 to Angular 8.
我有一个利用 SignalR 与桌面应用程序通信的应用程序。要使用 SignalR，我需要在我的 .ts 文件中使用 jQuery。但是，从 Angular 7 迁移到 Angular 8 后，它似乎不起作用。
I use declare var $: any;as I have in previous versions of Angular. Unfortunately, $ now prints blank to the console.
我declare var $: any;在以前版本的 Angular 中使用。不幸的是， $ 现在在控制台上打印空白。
So, does Angular v8 no longer support using jQuery this way, or did something else break in the migration?
那么，Angular v8 是不再支持以这种方式使用 jQuery，还是在迁移过程中发生了其他问题？
Update:
更新：
I have jQuery v3.3.1 loaded via npm.
我通过 npm 加载了 jQuery v3.3.1。
This makes it global (in angular.json)
这使它成为全球性的（在 angular.json 中）
"scripts": [
"./node_modules/jquery/dist/jquery.min.js",
"./node_modules/signalr/jquery.signalR.js"
]
采纳答案by Irrelevant_Coder
So, after stepping away from the issue for a bit and using roberts answer to confirm jQuery was working in app.module.ts (I wasn't aware a console.log would work in the middle of the imports), I realized I had fought this issue the last time I upgraded v4 to v7.
所以，在暂时离开这个问题并使用 roberts 的答案来确认 jQuery 在 app.module.ts 中工作之后（我不知道 console.log 会在导入的中间工作），我意识到我有我上次将 v4 升级到 v7 时解决了这个问题。
What had happened, is a dependency was causing jQuery to be reloaded. The section of the app that starts the signalR communication also loads another dependency (telerik-angular-report-viewer) which was causing console.log($) to display nothing because jQuery hadn't been loaded into the component yet.
发生的事情是依赖项导致 jQuery 被重新加载。启动 signalR 通信的应用程序部分还加载了另一个依赖项 (telerik-angular-report-viewer)，它导致 console.log($) 不显示任何内容，因为 jQuery 尚未加载到组件中。
The fix:
修复：
Remove the following code
删除以下代码
window.jQuery = jQuery;
window.$ = jQuery;
from the following files
从以下文件
- dependencies\telerikReportViewer.kendo.min.js
- dependencies\telerikReportViewer.js
- cjs\telerik-report-viewer.component.js
- es\telerik-report-viewer.component.js
- 依赖项\telerikReportViewer.kendo.min.js
- 依赖项\telerikReportViewer.js
- cjs\telerik-report-viewer.component.js
- es\telerik-report-viewer.component.js
回答by Tony Ngo
More elegant way without using
更优雅的方式不使用
declare var $: any;
First run
首轮
npm install jquery --save
npm install @types/jquery --save
Then in scripts section in architect => build of angular.json file add path for jquery lib
然后在架构师 => 构建 angular.json 文件的脚本部分中为 jquery lib 添加路径
"scripts": [
"node_modules/jquery/dist/jquery.min.js"
]
Then in your tsconfig.app.json
然后在你的 tsconfig.app.json
{
"extends": "../tsconfig.json",
"compilerOptions": {
"outDir": "../out-tsc/app",
"types": ["jquery"] // add here
},
"exclude": ["test.ts", "**/*.spec.ts"]
}
So now you can use jquery anywhere in your project without using declare var $ : anyfor every file you need to use jquery
所以现在你可以在你的项目中的任何地方使用 jquery，而不用declare var $ : any为你需要使用 jquery 的每个文件使用
回答by robert
Angular 8 works with JQuery.
Angular 8 适用于 JQuery。
"dependencies": {
...
"jquery": "^3.4.1",
...
}
in your angular.json file import the required file like this:
在您的 angular.json 文件中导入所需的文件，如下所示：
"scripts": [
"node_modules/jquery/dist/jquery.min.js"
]
no ./at the beginning, just node_modules/...
./一开始没有，只是node_modules/...
In your app.module verify it is working like this:
在您的 app.module 中验证它的工作方式如下：
import { AppComponent } from './app.component';
declare var $: any;
console.log(`jQuery version: ${$.fn.jquery}`);
@NgModule({
In the developer tools console it should print this:
在开发人员工具控制台中，它应该打印：
jQuery version: 3.4.1
jQuery 版本：3.4.1
