[解決済み】AngularでjQueryを使用するには？

質問

誰か教えてください。 jQuery と アンギュラー ?

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

を操作するような回避策があることは承知しています。 クラス または イド を使うことができますが、もっとすっきりした方法を期待しています。

どのように解決するのですか？

Angular2からのjQueryの使用は、ng1に比べて簡単です。TypeScriptを使用している場合は、まずjQueryのtypescriptの定義を参照することができます。

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

TypescriptDefinitions は必要ありません。 any の型として $ または jQuery

angular コンポーネントでは、テンプレートの DOM 要素を @ViewChild() ビューが初期化された後に 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;
}