Angular2：从javascript函数调用组件方法[重复]

Question

目前我正在尝试在我的 Angular2 项目中实现使用jQuery 的引导日期选择器。这是我目前所拥有的：

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

错误。

如何在js 函数中调用Angular2 组件、服务或任何东西的方法？

Answer 1

在回调中使用箭头函数：

     $('input[name="daterange"]').daterangepicker(
        this.options,
        (start, end) => {
            let obj = {};
            obj['start'] = start;
            obj['end'] = end;

            this._observable.updateFilter(obj);
        }
    );

或者使用Function的bind方法：

     $('input[name="daterange"]').daterangepicker(
        this.options,
        function (start, end) {
            let obj = {};
            obj['start'] = start;
            obj['end'] = end;

            this._observable.updateFilter(obj);
        }.bind(this);
    );