jquery - Angular 2 从 Jquery 调用 Typescript 函数导致未捕获的 TypeError

Question

我有一个带有输入文本字段的组件，我已使用 JQuery 将输入事件监听器附加到该组件。当输入的值发生变化时，我想调用一个 Typescript 函数，但它会抛出一个未捕获的 TypeError。

这是我的代码:

import {Component, Input, Output, EventEmitter, ElementRef, OnInit} from 'angular2/core';
declare var jQuery: any;

@Component({
    selector: 'setting-priority',
    template: '<input [(ngModel)]="priority" class="setting-priority" type="text">'
})

export class SettingPriorityComponent implements OnInit{
    @Input() priority: number;
    @Output() prioChanged: EventEmitter<number> = new EventEmitter();

    constructor(private elementRef:ElementRef) { }

    ngOnInit() {
        jQuery(this.elementRef.nativeElement).find('input').on('input', function() {
            // Here I will pass the changed value to onChange function
            this.onChange();
        });
    }

    ngOnChanges(changes) { 
        this.prioChanged.emit(this.priority);
    }

    // In this function I will receive the value and assign it to the priority variable
    onChange() {
        console.log("onchange!");
    }
}

我正在使用 Jquery，因为输入值将以编程方式设置 - 在这种情况下，Angular 的变更检测不起作用 Details here

当我触发输入事件时，我收到一个Uncaught TypeError: this.onChange is not a function

我做错了什么？

Answer 1

我会使用箭头函数。这样您就可以使用词法 this(对应于组件实例):

jQuery(this.elementRef.nativeElement).find('input').on('input', () => {
  this.onChange();
});

有关详细信息，请参阅此链接: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions