如何使用jQuery与Angular2？ [英] How to use jQuery with Angular2?

问题描述

谁能告诉我，怎么使用的jQuery 是 Angular2

can anyone tell me, how to use jQuery with Angular2?

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

我知道有像操纵DOM元素前期的的类的或的标识的变通方法，但我希望做一个更清洁的方式。

I'm aware there are workarounds like manipulating the class or id of the DOM element upfront, but I'm hoping for a cleaner way of doing it.

推荐答案

这Angular2使用jQuery是一件轻而易举相比，NG1。如果您使用的是打字稿，你应该首先引用jQuery的打字稿定义

Using jQuery from Angular2 is a breeze compared to ng1. If you are using typescript you should first reference jQuery typescript definition

tsd install jquery --save

而在你的TS文件：

And in your ts file:

/// <reference path="typings/jquery/jquery.d.ts" />

tslint会给你自从与量角器$冲突错误
    随后变量声明必须具有相同的类型。变量$的类型必须是'cssSelectorHelper，但这里的类型为JQueryStatic

tslint will give you an error since $ conflicts with protractor Subsequent variable declarations must have the same type. Variable '$' must be of type 'cssSelectorHelper', but here has type 'JQueryStatic'

修改jquer.d.ts并更改

Modify jquer.d.ts and change

declare module "jquery" {
    export = $;
}
declare var jQuery: JQueryStatic;
declare var $: JQueryStatic;

要：

declare module "jquery" {
    export = jQuery;
}
declare var jQuery: JQueryStatic;

在您的角度成分，你应该注入到元素的引用并引用nativeElement财产。这会给你到你的组件根元素的引用，所以你可能会想抓住的第一个子节点。

In your angular component you should inject a reference to the element and reference the nativeElement property. This will give you a reference to the your components root element, so you would probably want to grab the first child node.

jQuery的声明变量作为JQueryStatic会给你一个类型引用的jQuery

Declaring jQuery variable as JQueryStatic will give you a typed reference to jQuery

/// <reference path="typings/jquery/jquery.d.ts" />
import {bootstrap}    from 'angular2/platform/browser';
import {Component, ElementRef, AfterViewInit} from 'angular2/core';

declare var jQuery:JQueryStatic;

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

    constructor(private el:ElementRef) {
    }

    ngAfterViewInit() {
        if(!NgChosenComponent.chosenInitialized) {
            jQuery(this.el.nativeElement)
                .find('select')
                .chosen()
                .on('change', (e, args) => {
                    this.selectedValue = args.selected;
            });
            NgChosenComponent.chosenInitialized = true;
        }
    }
}

bootstrap(NgChosenComponent);

这例子是plunker avalible： http://plnkr.co/edit/OH3HMIKl7QmFMCQdqTFm

This example is avalible on plunker: http://plnkr.co/edit/OH3HMIKl7QmFMCQdqTFm

tslint会抱怨选择不beeing jQuery的属性，来解决这个问题，你可以定义添加到jquery.d.ts

tslint will complain about chosen not beeing a property on jQuery, to fix this you can add a definition to the jQuery interface in jquery.d.ts

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

declare module "jquery" {
    export = JQuery;
}
declare var jQuery: JQueryStatic;

这篇关于如何使用jQuery与Angular2？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！