有人能告诉我,jQuery和Angular怎么用吗?
class MyComponent {
constructor() {
// how to query the DOM element from here?
}
}
我知道有一些变通办法,比如预先操作DOM元素的class或id,但我希望有一种更干净的方式来做这件事.
有人能告诉我,jQuery和Angular怎么用吗?
class MyComponent {
constructor() {
// how to query the DOM element from here?
}
}
我知道有一些变通办法,比如预先操作DOM元素的class或id,但我希望有一种更干净的方式来做这件事.
与NG1相比,在Angular2中使用jQuery轻而易举.如果您使用的是TypeScript,您可以首先引用jQuery TypeScript定义.
tsd install jquery --save
or
typings install dt~jquery --global --save
TypescriptDefinition不是必需的,因为您可以只使用any
作为$
或jQuery
的类型
在Angular 组件中,您应该使用@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);
此示例在PLANKER:http://plnkr.co/edit/Nq9LnK?p=preview上提供
tslint会抱怨chosen
不是$上的属性,要解决这个问题,您可以在自定义的*.d.ts文件中向JQuery接口添加定义
interface JQuery {
chosen(options?:any):JQuery;
}