目前我正在尝试使用jQuery
和我的Angular2项目实现bootstrap datepicker。以下是我到目前为止的情况:
import {Component, AfterViewInit, Injector, Inject} from '@angular/core';
import {ObservableService} from "../../../services/data-observable.service";
declare var $:any;
@Component({
selector: 'date-range',
moduleId: module.id,
template: `<input name="daterange" class="filter-date-range"/>`
})
export class DateRange implements AfterViewInit {
options = { locale: {
format: 'YYYY-MM-DD'
},
startDate: '2013-01-01',
endDate: '2013-12-31'};
constructor(@Inject(Injector) private injector: Injector,
@Inject(ObservableService) private _observable: ObservableService) { }
ngAfterViewInit() {
$('input[name="daterange"]').daterangepicker(
this.options,
function (start, end) {
let obj = {};
obj['start'] = start;
obj['end'] = end;
this._observable.updateFilter(obj);
}
);
}
}
除了这段代码之外,一切都很完美
this._observable.updateFilter(obj);
这里我正在尝试将ObservableService
方法调用路径转换为daterangepicker
回调函数,该函数会激活每次更改日期值。所以,我得到了一个
Uncaught TypeError: Cannot read property 'updateFilter' of undefined
错误。
如何调用Angular2组件,服务或js
函数内的任何方法?
答案 0 :(得分:2)
在回调中使用箭头功能:
$('input[name="daterange"]').daterangepicker(
this.options,
(start, end) => {
let obj = {};
obj['start'] = start;
obj['end'] = end;
this._observable.updateFilter(obj);
}
);
或者使用Function的绑定方法:
$('input[name="daterange"]').daterangepicker(
this.options,
function (start, end) {
let obj = {};
obj['start'] = start;
obj['end'] = end;
this._observable.updateFilter(obj);
}.bind(this);
);