如何在Angular中使用jQuery ?

有人能告诉我，如何在Angular中使用jQuery吗?

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

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

当前回答

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

2019-04-28 06:19:15

其他回答

如何在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 
}

2017-06-09 14:52:36

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

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

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

Import * as $ from jquery;

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

2017-05-03 07:05:30

首先，使用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");
        });
    });
  }
}

2019-12-31 07:05:46

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

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

TypescriptDefinitions不是必需的，因为你可以使用任何类型作为$或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会抱怨选择不是$上的属性，为了解决这个问题，你可以在自定义的*.d中添加一个定义到JQuery接口。ts文件

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

2015-06-05 09:16:33