如何在Angular中使用jQuery ?

谁能告诉我，如何与角一起使用jQuery ?

class MyComponent {
constructor() {
// how to query the DOM element from here?
}
}

我知道有一些变通办法，比如在前面操作DOM元素的类或id，但我希望有一种更干净的方式来做它。

590877 次浏览
小开
最佳答案

与ng1相比，在Angular2中使用jQuery非常简单。如果你使用的是TypeScript，你可以先引用jQuery TypeScript定义。

tsd install jquery --save
or
typings install dt~jquery --global --save

TypescriptDefinitions不是必需的，因为你可以只使用any作为$或jQuery的类型

在你的angular组件中，你应该使用@ViewChild()从模板中引用一个DOM元素。视图初始化后，你可以使用该对象的nativeElement属性并将其传递给jQuery。

将$(或jQuery)声明为querystatic将为您提供对jQuery的类型化引用。

import {bootstrap}    from '@angular/platform-browser-dynamic';
import {Component, ViewChild, ElementRef, AfterViewInit} from '@angular/core';
declare var $:JQueryStatic;


@Component({
selector: 'ng-chosen',
template: `<select #selectElem>
<option *ngFor="#item of items" [value]="item" [selected]="item === selectedValue">\{\{item}} option</option>
</select>
<h4> \{\{selectedValue}}</h4>`
})
export class NgChosenComponent implements AfterViewInit {
@ViewChild('selectElem') el:ElementRef;
items = ['First', 'Second', 'Third'];
selectedValue = 'Second';


ngAfterViewInit() {
$(this.el.nativeElement)
.chosen()
.on('change', (e, args) => {
this.selectedValue = args.selected;
});
}
}


bootstrap(NgChosenComponent);

这个例子在plunker: http://plnkr.co/edit/Nq9LnK?p=preview上可用

tslint会抱怨chosen不是$上的属性，为了解决这个问题，你可以在自定义的*.d中添加一个定义到JQuery接口。ts文件

interface JQuery {
chosen(options?:any):JQuery;
}
小开

你可以实现生命周期钩子ngAfterViewInit ()来添加一些DOM操作

ngAfterViewInit() {
var el:any = elelemtRef.domElement.children[0];
$(el).chosen().on('change', (e, args) => {
_this.selectedValue = args.selected;
});
}

使用路由器时要小心，因为angular2可能会回收视图。所以你必须确保DOM元素的操作只在afterViewInit的第一次调用中完成。(你可以使用静态布尔变量来实现)

class Component {
let static chosenInitialized  : boolean = false;
ngAfterViewInit() {
if (!Component.chosenInitialized) {
var el:any = elelemtRef.domElement.children[0];
$(el).chosen().on('change', (e, args) => {
_this.selectedValue = args.selected;
});
Component.chosenInitialized = true;
}
}
}
小开

我发现的最有效的方法是在页面/组件构造函数中使用时间为0的setTimeout。这会让jQuery在Angular加载完所有子组件后的下一个执行周期中运行。其他一些组件方法也可以使用，但我所尝试的最好的工作时运行在一个setTimeout。

export class HomePage {
constructor() {
setTimeout(() => {
// run jQuery stuff here
}, 0);
}
}
小开
< p >
1)在组件中访问DOM 
import {BrowserDomAdapter } from '@angular/platform-browser/src/browser/browser_adapter';
constructor(el: ElementRef,public zone:NgZone) {
this.el = el.nativeElement;
this.dom = new BrowserDomAdapter();
}
ngOnInit() {
this.dom.setValue(this.el,"Adding some content from ngOnInit");
}

你可以通过以下方式包含jQuery。 2)在angular2加载

之前将jquery文件包含在index.html中 
      <head>
<title>Angular 2 QuickStart</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">


<!-- jquery file -->
<script src="js/jquery-2.0.3.min.js"></script>
<script src="js/jquery-ui.js"></script>
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>
</head>

你可以使用Jquery在以下方式，这里我使用Jquery Ui日期选择器。

    import { Directive, ElementRef} from '@angular/core';
declare  var $:any;
@Directive({
selector: '[uiDatePicker]',
})
export class UiDatePickerDirective {
private el: HTMLElement;
constructor(el: ElementRef) {
this.el = el.nativeElement;


}


ngOnInit() {
$(this.el).datepicker({
onSelect: function(dateText:string) {
//do something on select
}
});
}
}

这对我很有用。

小开

我用更简单的方式-首先在控制台:npm install jquery -S中通过npm安装jquery，然后在组件文件中我只写:let $ = require('.../jquery.min.js')，它就工作了!以下是我的一些代码的完整示例:

import { Component, Input, ElementRef, OnInit } from '@angular/core';
let $ = require('../../../../../node_modules/jquery/dist/jquery.min.js');


@Component({
selector: 'departments-connections-graph',
templateUrl: './departmentsConnectionsGraph.template.html',
})


export class DepartmentsConnectionsGraph implements OnInit {
rootNode : any;
container: any;


constructor(rootNode: ElementRef) {
this.rootNode = rootNode;
}


ngOnInit() {
this.container = $(this.rootNode.nativeElement).find('.departments-connections-graph')[0];
console.log({ container : this.container});
...
}
}

在模板我有例如:

<div class="departments-connections-graph">something...</div>

编辑

代替使用:

let $ = require('../../../../../node_modules/jquery/dist/jquery.min.js');

使用

declare var $: any;

在index.html中输入:

<script src="assets/js/jquery-2.1.1.js"></script>

这将只初始化jquery一次全局-这对于在bootstrap中使用模态窗口很重要…

小开
为什么每个人都把它搞得像火箭科学? 对于任何其他需要对静态元素做一些基本操作的人，例如body标签，只需这样做:

  1. 在index.html中添加script标签和你的jquery库的路径，不管在哪里(这样你也可以使用IE条件标签来加载IE9或更低版本的jquery)。
  2. 在你的export component块中有一个函数调用你的代码:$("body").addClass("done");通常这会导致声明错误，所以在这个.ts文件中所有的导入之后，添加declare var $:any;，你就可以开始了!
小开

现在它变得非常简单，你可以通过在Angular2控制器中声明任意类型的jQuery变量来实现。

declare var jQuery:any;

将其添加在import语句之后和组件装饰符之前。

要访问任何id为X或类为X的元素，你只需要这样做

jQuery("#X or .X").someFunc();
小开

/ /安装jquerynpm install jquery --save

//为jquerytypings install dt~jquery --global --save安装类型定义

//添加jquery库到build配置文件中(在"angular-cli-build.js"文件中)

vendorNpmFiles: [
.........
.........
'jquery/dist/jquery.min.js'
]

//运行build在build ng build中添加jquery库

//添加相对路径配置(在system-config.js) /**映射相对路径到url* / Const map: any = { …, ……, “jquery”:“供应商/ jquery / dist” }; < /代码> < / p > 

/** User packages configuration. */
const packages: any = {
......,
'jquery':{ main: 'jquery.min',
format: 'global',
defaultExtension: 'js'}};

在你的组件文件中导入jquery库

import 'jquery';

下面是示例组件的代码片段

import { Component } from '@angular/core';
import 'jquery';
@Component({
moduleId: module.id,
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.css']
})
export class AppComponent {
list:Array<number> = [90,98,56,90];
title = 'app works!';
isNumber:boolean = jQuery.isNumeric(89)
constructor(){}
}
小开

因为我是一个笨蛋，我认为有一些工作代码会很好。

而且，Angular2的角量角器有问题与jQuery类型版本$，所以顶部接受的答案不会给我一个干净的编译。

以下是我开始工作的步骤:

index . html

<head>
...
<script   src="https://code.jquery.com/jquery-3.1.1.min.js"   integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="   crossorigin="anonymous"></script>
...
</head>

内部my.component.ts

import {
Component,
EventEmitter,
Input,
OnInit,
Output,
NgZone,
AfterContentChecked,
ElementRef,
ViewChild
} from "@angular/core";
import {Router} from "@angular/router";


declare var jQuery:any;


@Component({
moduleId: module.id,
selector: 'mycomponent',
templateUrl: 'my.component.html',
styleUrls: ['../../scss/my.component.css'],
})
export class MyComponent implements OnInit, AfterContentChecked{
...
scrollLeft() {


jQuery('#myElement').animate({scrollLeft: 100}, 500);


}
}
小开

只写

declare var $:any;

在所有导入部分之后，你可以使用jQuery并在index.html页面中包含jQuery库

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

这对我很有效

小开

这对我来说很管用。

第一步——重要的事情先做

// In the console
// First install jQuery
npm install --save jquery
// and jQuery Definition
npm install -D @types/jquery

步骤2 -导入

// Now, within any of the app files (ES2015 style)
import * as $ from 'jquery';
//
$('#elemId').width();


// OR


// CommonJS style - working with "require"
import $ = require('jquery')
//
$('#elemId').width();

# update - __abc0

最近，我正在用ES6而不是typescript编写代码，并且能够在import statement中没有* as $而import。这是它现在的样子:

import $ from 'jquery';
//
$('#elemId').width();

祝你好运。

小开
请遵循这些简单的步骤。这对我很管用。为了避免混淆，让我们从一个新的angular 2应用开始。我使用的是Angular cli。因此，如果您还没有安装它，请安装它。 https://cli.angular.io/ < / p >

步骤1:创建一个演示angular 2应用程序

ng new jquery-demo

您可以使用任何名称。现在通过在cmd下运行检查它是否正在工作。(现在，如果不使用cd命令，请确保您指向'jquery-demo')

ng serve

你会在浏览器上看到“app works!”

步骤2:安装Bower (web包管理器)

在cli下运行这个命令(如果不使用cd命令，请确保你指向的是'jquery-demo'):

npm i -g bower --save

现在在成功安装凉亭后，创建一个“凉亭”。Json文件，使用以下命令:

bower init

它会要求输入，如果你想要默认值，只需要按enter键，最后输入“Yes”，当它会问“看起来不错吗?”

现在你可以在"jquery-demo"文件夹中看到一个新文件(bower.json)。你可以在https://bower.io/上找到更多信息

步骤3:安装jquery

执行此命令

bower install jquery --save

它将创建一个新文件夹(bower_components)，其中包含jquery安装文件夹。现在你已经在“bower_components”文件夹中安装了jquery。

第四步:在angular-cli中添加jquery location。json的文件

“angular-cli开放。Json文件(目前在'jquery-demo'文件夹)，并在“脚本”中添加jquery位置。它看起来是这样的:

"scripts": ["../bower_components/jquery/dist/jquery.min.js"
]

步骤5:编写简单的jquery代码进行测试

打开'app.component.html'文件，并添加一个简单的代码行，该文件看起来像这样:

<h1>
\{\{title}}
</h1>
<p>If you click on me, I will disappear.</p>

现在打开'app.component.ts'文件，并添加jquery变量声明和'p'标签的代码。你也应该使用生命周期钩子ngAfterViewInit()。修改后的文件看起来是这样的:

import { Component, AfterViewInit } from '@angular/core';
declare var $:any;


@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app works!';


ngAfterViewInit(){
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
}
}

现在使用'ng serve'命令运行你的angular 2应用并测试它。它应该会起作用。

小开

下面是对我有用的——带webpack的Angular 2

我试图声明$类型any，但每当我试图使用任何JQuery模块，我得到(例如)$(..).datepicker()不是一个函数

因为我有Jquery包含在我的供应商。ts文件，我只是将它导入到我的组件使用

import * as $ from 'jquery';

我现在能够使用Jquery插件(如bootstrap-datetimepicker)

小开
你也可以尝试用“InjectionToken”导入它。 如上所述:在Angular/Typescript中使用jQuery，不需要类型定义

可以简单地注入jQuery全局实例并使用它。为此，您不需要任何类型定义或类型。

import { InjectionToken } from '@angular/core';


export const JQ_TOKEN = new InjectionToken('jQuery');


export function jQueryFactory() {
return window['jQuery'];
}


export const JQUERY_PROVIDER = [
{ provide: JQ_TOKEN, useFactory: jQueryFactory },
];

当在app.module.ts中正确设置时:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';


import { AppComponent } from './app.component';


import { JQ_TOKEN } from './jQuery.service';


declare let jQuery: Object;


@NgModule({
imports: [
BrowserModule
],
declarations: [
AppComponent
],
providers: [
{ provide: JQ_TOKEN, useValue: jQuery }
],
bootstrap: [AppComponent]
})
export class AppModule { }

你可以在你的组件中使用它:

import { Component, Inject } from '@angular/core';
import { JQ_TOKEN } from './jQuery.service';


@Component({
selector: "selector",
templateUrl: 'somefile.html'
})
export class SomeComponent {
constructor( @Inject(JQ_TOKEN) private $: any) { }


somefunction() {
this.$('...').doSomething();
}
}
小开

如何在Angular2中使用Jquery

遵循以下步骤

安装Jquery和Juqry类型定义

Jquery安装npm install jquery --save

Jquery类型定义安装npm install @types/jquery --save-dev

然后简单的导入jquery

import { Component } from '@angular/core';
import * as $ from 'jquery';


@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
console.log($(window)); // jquery is accessible
}
小开

一个简单的方法:

1. 包括脚本

index . html

<script type="text/javascript" src="assets/js/jquery-2.1.1.min.js"></script>

2. 声明

my.component.ts

declare var $: any;

3.使用

@Component({
selector: 'home',
templateUrl: './my.component.html',
})
export class MyComponent implements OnInit {
...
$("#myselector").style="display: none;";
}
小开

如果你使用angular-cli，你可以:

  1. < p > 安装依赖项:

    NPM安装jquery

    NPM install @types/jquery——save-dev

  2. < p > 导入文件:

    在.angular-cli的“script”部分添加“../node_modules/jquery/dist/jquery.min.js”。json文件< / p >

  3. < p > 声明jquery:

    在tsconfig.app.json

    的“types”部分添加“$”

你可以在官方angular cli文档上找到更多细节

小开

第一步:使用命令:NPM install jquery——save

步骤2:你可以简单地导入angular:

从jquery中导入$;

就这些。

一个例子是:

import { Component } from '@angular/core';
import  $ from 'jquery';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})


export class AppComponent {
title = 'app';
constructor(){
console.log($('body'));
}




}
小开

我跳过jquery的安装，因为在我之前创建的所有帖子中都提到了这一点。因此，您已经安装了jquery。像这样将t导入组件

import * as $ from 'jquery';

将工作，但还有另一种“angular”的方式来做到这一点，即创建一个服务。

一步不。1:创建jquery.service.ts文件。

// in Angular v2 it is OpaqueToken (I am on Angular v5)
import { InjectionToken } from '@angular/core';
export const JQUERY_TOKEN = new InjectionToken('jQuery');

的一步。不。2:在app.module.ts中注册服务

import { JQUERY_TOKEN } from './services/jQuery.service';
declare const jQuery: Object;


providers: [
{ provide: JQUERY_TOKEN, useValue: jQuery },
]

一步不。3:将服务注入到组件my-super-duper.component.ts中

import { Component, Inject } from '@angular/core';


export class MySuperDuperComponent {
constructor(@Inject(JQUERY_TOKEN) private $: any) {}


someEventHandler() {
this.$('#my-element').css('display', 'none');
}
}

如果有人能解释这两种方法的优缺点，我将非常感激:DI jquery as a service vs. import * as $ from 'jquery';

小开

安装jquery

终端npm install jquery美元

(bootstrap 4…)

终端npm install popper.js美元

终端npm install bootstrap美元

然后将import语句添加到app.module.ts。

import 'jquery'

(bootstrap 4…)

import 'popper.js'
import 'bootstrap'

现在你将不再需要<SCRIPT>标记来引用JavaScript。

(你想要使用的任何CSS仍然必须在styles.css中引用)

@import "~bootstrap/dist/css/bootstrap.min.css";
小开

全球图书馆安装作为官方文件在这里

  1. < p > 从npm安装:

    npm install jquery --save < / p >

  2. < p > 在脚本中添加所需的脚本文件:

    < p > <强> <代码>“脚本”:[ “node_modules / jquery / dist / jquery.slim.js” 代码),< / > < /强> < / p > < /李>

重启服务器，如果你正在运行它，它应该工作在你的应用程序。

如果你想在一个单独的组件中使用import $ from 'jquery';在你的组件中

小开

使用Angular Cli

 npm install jquery --save

在角。脚本下的Json数组

"scripts": [ "node_modules/jquery/dist/jquery.min.js" ] // copy relative path of node_modules>jquery>dist>jquery.min.js to avoid path error

现在要使用jQuery，您所要做的就是将它导入到您想要使用jQuery的任何组件中。

例如在根组件中导入和使用jQuery

import { Component, OnInit  } from '@angular/core';
import * as $ from 'jquery'; // I faced issue in using jquery's popover
Or
declare var $: any; // declaring jquery in this way solved the problem


@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {




ngOnInit() {
}


jQueryExampleModal() { // to show a modal with dummyId
$('#dummyId').modal('show');
}
小开

其他人已经发帖了。但我在这里举一个简单的例子，这样可以帮助到一些新人。

步骤1:在index.html文件中引用jquery cdn

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

步骤2:假设我们想在点击按钮时显示或隐藏div:

 <input type="button" value="Add New" (click)="ShowForm();">




<div class="container">
//-----.HideMe{display:none;} is a css class----//


<div id="PriceForm" class="HideMe">
<app-pricedetails></app-pricedetails>
</div>
<app-pricemng></app-pricemng>
</div>

步骤3:在下面的组件文件中，import声明$如下所示:

declare var $: any;

然后创建如下函数:

 ShowForm(){
$('#PriceForm').removeClass('HideMe');
}

它将与最新的Angular和JQuery一起工作

小开

首先，使用npm安装jQuery，如下所示:

npm install jquery — save

其次，进入。/angular-cli。在你的Angular CLI项目文件夹的根目录下找到script:[]属性，并包括jQuery的路径，如下所示:

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

现在，要使用jQuery，您所要做的就是将它导入您想要使用jQuery的任何组件中。

import * as $ from 'jquery';
(or)
declare var $: any;

看看下面使用jQuery在点击时动画div的代码，特别是在第二行。我们正在从jQuery导入所有的$。

import { Component, OnInit  } from '@angular/core';
import * as $ from 'jquery';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
title = 'Look jQuery Animation working in action!';


public ngOnInit()
{
$(document).ready(function(){
$("button").click(function(){
var div = $("div");
div.animate({left: '100px'}, "slow");
div.animate({fontSize: '5em'}, "slow");
});
});
}
}
小开

角12

npm i jquery

这很重要:npm i @types/jquery

angular.json

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

.ts文件

import * as $ from "jquery";

提交答案