Angular 2從Jquery調用Typescript函數會導致未被捕獲的TypeError

我有一個組件，它帶有輸入文本字段，我已使用JQuery將輸入事件偵聽器附加到該文本字段。當輸入的值發生變化時，我想調用一個Typescript函數，但它會拋出未被捕獲的TypeError。Angular 2從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因爲輸入值將被編程設置 - 在這種情況下角的變化探測不起作用Details here

當我觸發輸入事件，我收到一個未捕獲TypeError：this.onChange不是函數

我在做什麼錯？

來源

2016-05-09 Eugenz

我會使用箭頭功能。這樣，您就可以使用這個詞彙（對應於組件實例）：

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

有關詳細信息，請參閱此鏈接： https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

來源

2016-05-09 20:11:48 yurzui

的偉大工程！謝謝！我發現另一個方法 - 將JavaScript變量綁定到角度上下文，然後調用使用它的函數： 'var self = this;' 'jQuery（this.elementRef.nativeElement）.find（' （'input'，function { self.onChange（）; }）;' – Eugenz

儘量避免在Angular2使用jQuery。

更angulary的方法來得到一個元素的引用將

@Component({ 
    selector: 'setting-priority', 
    template: '<input #prio [(ngModel)]="priority" class="setting-priority" type="text">' 
}) 
export class SettingPriorityComponent implements OnInit{ 
    @ViewChild('prio') priority; 

    ngOnInit() { 
    console.log(this.priority); 
    } 
}

，但添加的事件處理程序，你只需要：

template: '<input [(ngModel)]="priority" (input)="onChange()" class="setting-priority" type="text">'

來源

2016-05-10 05:14:57

謝謝！我正在使用Jquery-UI使用拖放功能來對錶進行排序，因爲我沒有爲本地Angular 2找到這樣一個簡單的解決方案。 – Eugenz

Angular 2從Jquery調用Typescript函數會導致未被捕獲的TypeError

回答

相關問題