开发者问题收集

如何将 jQuery 与 Angular 结合使用？

2015-06-03
641879
jquery angular

有人能告诉我如何将 jQuery 与 Angular 结合使用吗？ 

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

我知道有一些解决方法，例如预先操作 DOM 元素的 class 或 id ，但我希望有一种更简洁的方法来实现它。

3个回答

与 ng1 相比，在 Angular2 中使用 jQuery 轻而易举。如果您使用的是 TypeScript，则可以先引用 jQuery typescript 定义。 

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

不需要 TypescriptDefinitions，因为您只需使用 any 作为 $ 或 jQuery 的类型即可。>

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

将 $ （或 jQuery ）声明为 JQueryStatic 将为您提供对 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.ts 文件中添加对 JQuery 接口的定义 

interface JQuery {
    chosen(options?:any):JQuery;
}
werenskjold
2015-06-05

这对我有用。

步骤 1 - 首先 

// 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();

#更新 - Feb - 2017

最近，我使用 ES6 而不是 typescript 编写代码，并且能够在 import 语句 中不带 * as $ 地进行 import 。现在看起来是这样的： 

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

祝你好运。

Aakash
2016-11-01

为什么每个人都把它当成火箭科学？ 对于其他需要在静态元素上做一些基本操作的人，例如 body 标签，只需执行以下操作：

  1. 在 index.html 中添加 script 标签，其中包含 jquery 库的路径，无论在哪里（这样，您还可以使用 IE 条件标签为 IE9 及以下版本加载较低版本的 jquery）。
  2. 在您的 export component 块中有一个调用您的代码的函数： $("body").addClass("done"); 通常这会导致声明错误，因此在此 .ts 文件中的所有导入之后，添加 declare var $:any; 就可以了！
Starwave
2016-07-07