我想在一个角度项目中使用范围滑块，我尝试使用一个可用的模块来实现角度 4。
它在编译期间工作正常，但是当我尝试构建它以进行部署时，它会引发以下错误。
我检查了直接在 Angular 项目中使用 jQuery 插件的选项，而我只获得了在 Angular 2 中执行此操作的选项。
有什么方法可以在 Angular 4 中使用 jQuery 插件？
请告诉我。
提前致谢！
【问题讨论】：
用 npm 安装 jquery
npm install jquery --save
添加类型
npm install --save-dev @types/jquery
将脚本添加到 angular-cli.json
"apps": [{
...
"scripts": [
"../node_modules/jquery/dist/jquery.min.js",
],
...
}]
构建项目并服务
ng build
希望这会有所帮助！享受编码
【讨论】：
add declare var jquery:any; declare var $ :any; 到您的 .ts 文件中。
Cannot find name '$'
declare const $: any;。
是的，你可以在 Angular 4 中使用 jquery
步骤：
1) 在index.html 中，将下面的行放入标记中。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
2) 在下面的组件 ts 文件中，您必须像这样声明 var
import { Component } from '@angular/core';
declare var jquery:any;
declare var $ :any;
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'angular 4 with jquery';
toggleTitle(){
$('.title').slideToggle(); //
}
}
并将此代码用于相应的 html 文件，如下所示：
<h1 class="title" style="display:none">
{{title}}
</h1>
<button (click)="toggleTitle()"> clickhere</button>
这对你有用。谢谢
【讨论】：
使用 NPM 安装 jQuery Jquery NPM
npm install jquery
安装jQuery声明文件
npm install -D @types/jquery
在 .ts 中导入 jQuery
import * as $ from 'jquery';
类内调用
export class JqueryComponent implements OnInit {
constructor() {
}
ngOnInit() {
$(window).click(function () {
alert('ok');
});
}
}
【讨论】：
在安装 @types/jquery 时不需要声明任何 jQuery 变量。
declare var jquery:any; // not required
declare var $ :any; // not required
您应该可以在任何地方访问 jQuery。
以下应该有效：
jQuery('.title').slideToggle();
【讨论】：
.ts 文件中声明它们，我会收到此错误Cannot find name 'jQuery'。所以，如果有人遇到这个问题，他只需要声明他们。
你不应该在 Angular 中使用 jQuery。虽然这是可能的（请参阅此问题的其他答案），但不鼓励这样做。为什么？
Angular 在其内存中拥有自己的 DOM 表示，并且不像 jQuery 那样使用查询选择器（像 document.getElementById(id) 这样的函数）。相反，所有 DOM 操作都由 Renderer2 完成（以及像 *ngFor 和 *ngIf 这样的 Angular 指令在后台/框架代码中访问该 Renderer2）。如果您自己使用 jQuery 操作 DOM，您迟早会...
如果您真的想包含 jQuery（用于制作一些您将 100% 彻底丢弃的原型），我建议至少将其包含在您的 package.json 中并使用 npm install --save jquery，而不是从谷歌的 CDN 获取它.
TLDR：要学习如何以 Angular 方式操作 DOM，请先阅读官方英雄教程：https://angular.io/tutorial/toh-pt2 如果您需要访问 DOM 层次结构中更高的元素（父级或
document body）或者由于某些其他原因指令，如*ngIf、*ngFor、自定义指令、管道和其他角度实用程序，如[style.background]、[class.myOwnCustomClass]不能满足您的需求，请使用 Renderer2：https://www.concretepage.com/angular-2/angular-4-renderer2-example
【讨论】：
constructor(private renderer: Renderer2, private el: ElementRef) {}) 时，您可以过滤其子元素或直接通过访问它的 nativeElement-Property 来操作该元素：ngOnInit() { this.renderer.addClass(this.el.nativeElement, 'wild'); }。这是一个如何告诉您更多信息的教程：alligator.io/angular/using-renderer2
*ngIf、*ngFor、自定义（由您制作）指令、管道以及 CSS ngClass、[style.background] 和[class.myCustomCssClass] 轻松处理。如需进一步帮助：angular.io/tutorial/toh-pt2
试试这个：
import * as $ from 'jquery/dist/jquery.min.js';
或者在 angular-cli.json 中添加脚本：
"scripts": [
"../node_modules/jquery/dist/jquery.min.js",
]
在您的 .ts 文件中：
declare var $: any;
【讨论】：
你可以像这样更新你的 jquery 类型版本
npm install --save @types/jquery@latest
我遇到了同样的错误，我已经在网上冲浪了 5 天以寻求解决方案。它对我有用，它应该对你有用
【讨论】：
如果您需要在项目中使用其他库--typescript--而不仅仅是在项目中--角度-您可以查找 tds（TypeScript 声明文件），它们是 depares 并且具有方法、类型、函数的信息，等，TypeScript 可以使用，通常不需要导入。声明 var 是最后一个资源
npm install @types/lib-name --save-dev
【讨论】：
你可以使用 webpack 来提供它。然后会自动注入DOM。
module.exports = {
context: process.cwd(),
entry: {
something: [
path.join(root, 'src/something.ts')
],
vendor: ['jquery']
},
devtool: 'source-map',
output: {
path: path.join(root, '/dist/js'),
sourceMapFilename: "[name].js.map",
filename: '[name].js'
},
module: {
rules: [
{test: /\.ts$/, exclude: /node_modules/, loader: 'ts-loader'}
]
},
resolve: {
extensions: ['.ts', '.es6', '.js', '.json']
},
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery'
}),
]
};
【讨论】：
打字稿的解决方案：
第一步：
npm install jquery
npm install --save-dev @types/jquery
step2: 在 Angular.json 中添加：
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
]
或在 index.html 中添加：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
step3:在*.component.ts中你要使用jquery的地方
import * as $ from 'jquery'; // dont need "declare let $"
然后你就可以像使用javaScript一样使用jquery了。这样，VScode 支持 Typescript 的自动提示
【讨论】：
尝试使用 - 声明 let $ :any;
或从 'jquery/dist/jquery.min.js' 导入 * 作为 $； 提供库的确切路径
【讨论】：
ngOnInit() {
const $ = window["$"];
$('.flexslider').flexslider({
animation: 'slide',
start: function (slider) {
$('body').removeClass('loading')
}
})
}
【讨论】：