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

Question

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

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

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

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

请告诉我.

提前致谢!

Answer 1

用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

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

Answer 2

是的,您可以在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>

这对你有用.谢谢

Answer 3

使用NPM Jquery NPM安装jQuery

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');
        });
    }

}

Answer 4

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

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

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

以下应该有效:

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

Answer 5

你不应该在Angular中使用jQuery.尽管有可能(请参阅此问题的其他答案),但不鼓励这样做.为什么？

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

1. 遇到同步问题,并且在屏幕上的正确时间出现错误或出现错误
2. 在更复杂的组件中存在性能问题,因为Angular的内部DOM表示绑定到zone.js及其更改检测机制 - 因此手动更新DOM将始终阻止运行应用程序的线程.
3. 还有其他令人困惑的错误,你不知道它的起源.
4. 无法正确测试应用程序(Jasmine要求您知道元素何时被渲染)
5. 无法使用Angular Universal或WebWorkers

如果你真的想要包含jQuery(用于捕捉一些你将100%最终扔掉的原型),我建议至少将它包含在你的package.json中,npm install --save jquery而不是从google的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-示例

Answer 6

试试这个:

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

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

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

并在您的.ts文件中:

declare var $: any;