如何在Angular 4中使用jQuery插件？

I want to use a range slider in an angular project and I tried using one available module for angular 4.

我想在角度项目中使用范围滑块，我尝试使用一个可用的角度4模块。

It works fine during compilation but when I try to build it for deployment, it throws the below error.

它在编译期间工作正常，但是当我尝试构建它以进行部署时，它会抛出以下错误。

I checked for the option of using jQuery plugin directly in the angular project and I'm only getting options for doing it in Angular 2.

我检查了在角度项目中直接使用jQuery插件的选项，我只是在Angular 2中获得选项。

Is there any way we can use jQuery plugins in Angular 4?

有没有什么办法可以在Angular 4中使用jQuery插件？

Please let me know.

请告诉我。

Thanks in advance!

提前致谢！

9 个解决方案

#1

Yes you can use jquery with Angular 4

是的，您可以在Angular 4中使用jquery

Steps:

脚步：

1) In index.html put below line in tag.

1）在index.html中将下面的行放在标记中。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

2) In component ts file below you have to declare var like this

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 = 'abgular 4 with jquery';
  toggleTitle(){
    $('.title').slideToggle(); //
  }

}

And use this code for corresponding html file like this:

并将此代码用于相应的html文件，如下所示：

<h1 class="title" style="display:none">
  {{title}}
</h1>
<button (click)="toggleTitle()"> clickhere</button>

This will work for you. Thanks

这对你有用。谢谢

#2

Install jquery with npm

用npm安装jquery

npm install jquery --save

Add typings

添加打字

npm install --save-dev @types/jquery

Add scripts to angular-cli.json

将脚本添加到angular-cli.json

"apps": [{
  ...
  "scripts": [
    "../node_modules/jquery/dist/jquery.min.js",
  ],
  ...
}]

Build project and serve

建立项目和服务

ng build

Hope this helps! Enjoy coding

希望这可以帮助！享受编码

#3

You are not required to declare any jQuery variable as you installed @types/jquery.

在安装@ types / jquery时，不需要声明任何jQuery变量。

declare var jquery:any;   // not required
declare var $ :any;   // not required

You should have access to jQuery everywhere.

你应该可以在任何地方访问jQuery。

The following should work:

以下应该有效：

jQuery('.title').slideToggle();

#4

Install jQuery using NPM Jquery NPM

使用NPM Jquery NPM安装jQuery

npm install jquery

Install the jQuery declaration file

安装jQuery声明文件

npm install -D @types/jquery

Import jQuery inside .ts

在.ts中导入jQuery

import * as $ from 'jquery';

call inside class

在课堂内打电话

export class JqueryComponent implements OnInit {

constructor() {
}

ngOnInit() {
    $(window).click(function () {
        alert('ok');
        });
    }

}

#5

Try this:

尝试这个：

import * as $ from 'jquery/dist/jquery.min.js';

Or add scripts to angular-cli.json:

或者向angular-cli.json添加脚本：

"scripts": [
    "../node_modules/jquery/dist/jquery.min.js",
  ]

and in your .ts file:

并在.ts文件中：

declare var $: any;

#6

You should not use jQuery in Angular. While it is possible (see other answers for this question), it is discouraged. Why?

你不应该在Angular中使用jQuery。虽然有可能（请参阅此问题的其他答案），但不鼓励这样做。为什么？

Angular holds an own representation of the DOM in its memory and doesn't use query-selectors (functions like document.getElementById(id)) like jQuery. Instead all the DOM-manipulation is done by Renderer2 (and Angular-directives like *ngFor and *ngIf accessing that Renderer2 in the background/framework-code). If you manipulate DOM with jQuery yourself you will sooner or later...

Angular在其内存中拥有DOM的自己的表示，并且不使用像jQuery那样的查询选择器（像document.getElementById（id）这样的函数）。相反，所有DOM操作都是由Renderer2完成的（和Angular-directives一样，* ngFor和* ngIf在后台/框架代码中访问Renderer2）。如果你自己用jQuery操作DOM，你迟早会...

1. Run into synchronization problems and have things wrongly appearing or not disappearing at the right time from your screen
2. 遇到同步问题，并且在屏幕上的正确时间出现错误或出现错误
3. Have performance issues in more complex components, as Angular's internal DOM-representation is bound to zone.js and its change detection-mechanism - so updating the DOM manually will always block the thread your app is running on.
4. 在更复杂的组件中存在性能问题，因为Angular的内部DOM表示绑定到zone.js及其更改检测机制 - 因此手动更新DOM将始终阻止运行应用程序的线程。
5. Have other confusing errors you don't know the origin of.
6. 还有其他令人困惑的错误，你不知道它的起源。
7. Not being able to test the application correctly (Jasmine requires you to know when elements have been rendered)
8. 无法正确测试应用程序（Jasmine要求您知道元素何时被渲染）
9. Not be able to use Angular Universal or WebWorkers (both have very limited use-cases but still worth mentioning)
10. 无法使用Angular Universal或WebWorkers（两者都有非常有限的用例，但仍值得一提）

If you really want to include jQuery (for duck-taping some prototype that you will 100% definitively throw away), I recommend to at least include it in your package.json with npm install --save jquery instead of getting it from google's CDN.

如果你真的想要包含jQuery（用于编写一些你将100％最终扔掉的原型），我建议至少将它包含在你的package.json中，使用npm install --save jquery而不是从google的CDN中获取它。

TLDR: For manipulating the DOM in the Angular way please go through the official tour-of heroes tutorial first: https://angular.io/tutorial/toh-pt2 If you need to access elements higher up in the DOM hierarchy (parent or document body) or for some other reason directives like *ngIf, *ngFor, custom directives, pipes and other angular utilities like [style.background], [class.myOwnCustomClass] don't satisfy your needs, use Renderer2: https://www.concretepage.com/angular-2/angular-4-renderer2-example

TLDR：要以Angular方式操作DOM，请首先浏览官方的英雄教程：https：//angular.io/tutorial/toh-pt2如果您需要访问DOM层次结构中较高的元素（父级或文档正文）或其他一些原因指令，如* ngIf，* ngFor，自定义指令，管道和其他角度实用程序，如[style.background]，[class.myOwnCustomClass]不满足您的需求，请使用Renderer2：https：// www.concretepage.com/angular-2/angular-4-renderer2-example

#7

You can update your jquery typings version like so

您可以更新您的jquery类型版本

npm install --save @types/jquery@latest

I had this same error and I've been at if for 5 days surfing the net for a solution.it worked for me and it should work for you

我有同样的错误，我曾经在网上冲浪5天寻找解决方案。这对我有用，它应该适合你

#8

If you have the need to use other libraries in projects --typescript-- not just in projects - angle - you can look for tds's (TypeScript Declaration File) that are depares and that have information of methods, types, functions, etc. , which can be used by TypeScript, usually without the need for import. declare var is the last resource

如果您需要在项目中使用其他库--typescript--而不仅仅是在项目中 - 角度 - 您可以查找删除的tds（TypeScript声明文件），它们包含方法，类型，函数等信息，可以由TypeScript使用，通常无需导入。 declare var是最后一个资源

npm install @types/lib-name --save-dev

#9

ngOnInit() {
     const $ = window["$"];
     $('.flexslider').flexslider({
        animation: 'slide',
        start: function (slider) {
          $('body').removeClass('loading')
        }
     })
}