web-dev-qa-db-ja.com

TypeScriptで別の関数内の関数を呼び出す方法Angular

私はAngular 2を初めて使用します。以下のコードをAngularで記述しました

export class TestClass {

    constructor() {
        this.initMap();
    }

    initMap() {
        this.marker.addListener('dragend', this.onMarkerDrop);
    }

    onMarkerDrop(event) {
        this.functionTwo(); // Getting error this.functionTwo is not a function
    }

    functionTwo() {

    }
}

注：この質問をする前に、stackoverflowで検索したところ、これらのリンクが見つかりました

'this.function'は関数ではありません-OO JS

this.functionは関数ではありません：TypeScript

角度-this.functionは関数ではありません

彼らは、他のメンバー関数を呼び出すために矢印関数を使用すると言っています。しかし、私は自分のコードにそれらの提案を実装する方法を知りません。正しく理解できなかったのかもしれません。

FunctionOne（）;からアロー関数を使用してthis.functionTwo（）を呼び出す方法など、あなたの助けが欲しい

ご協力ありがとうございました。

javascriptangulargoogle-mapstypescriptionic-framework
6
Javascript Lover - SKT

関数onMarkerDropは、コンテキスト変更されるとthisが異なる値を持つコールバックとして渡されます。コンテキストを保持するには、送信中に矢印またはバインドを使用します。

this.marker.addListener('dragend', this.onMarkerDrop.bind(this));

または

this.marker.addListener('dragend', ($event)=>this.onMarkerDrop($event));
0
Suraj Rao

コードの更新に従って、：のように使用できます

_this.marker.addListener('dragend', this.onMarkerDrop.bind(this));
// OR
this.marker.addListener('dragend', ($event) => this.onMarkerDrop($event));
_

コードは100％正常に動作します：（質問の更新前）

_functionOne() {
    this.functionTwo(); // Getting error this.functionTwo is not a function
}

functionTwo() {
    alert('function2');
}
_

詳しくは、以下のコードを確認してください

_functionOne() {
    // this will throw error this.functionTwo is not a function
    setTimeout(function(){ // normal function
        this.functionTwo();  
    })

    // This wont throw the error
    setTimeout(() => { // fat arrow
        this.functionTwo(); // Getting error this.functionTwo is not a function        
    })
}

functionTwo() {
    alert('function2');
}
_

太い矢印で動作する理由：

これは周囲からピックアップされます（字句）。したがって、bind()や_that = this_は必要なくなりました。

通常の関数では、bind()または_that = this_を実行する必要があります

4
Vivek Doshi