2017-09-28 8 views
0

私は角2+とtypescriptに1つの問題があります.2つのコンポーネントと1つのサービスを持っていますが、達成する必要があるのはModal(コンポーネント)を開いて私の場合私はhttp.postを行う)ので、私は他のコンポーネントで別の機能を実行する必要がありますモーダルの中に追加ボタンをクリックします。達成するために、私は "コールバックを更新する"関数を作成しました。angle 2+ refreshコールバックが期待どおりに動作しない

だから、シェアードサービスに私はこの

private refreshCallback = Function; 

setRefreshCallback(callback) { 
    refreshCallback = callback; 
} 

runRefreshCallback() { 
    refreshCallback(); 
} 

そして、ユーザーがクリックがモーダルに追加するとき、私はリフレッシュを行う必要があり、私のコンポーネント内に、私はこの

getSomeData() { 
this.service.getData().toPromise().then(data=>{ 
    // do some stuff 
}); 
} 

と私はただのinit ngの上を持っているを持っていますモーダルアクションボタンがクリックされたときに実行する必要のあるコールバックを設定する

ngOnInit() { 
    this.service.setRefreshCallback(this.getSomeData); 
} 

次のもの内部ユーザーがクリックはここで起こるコールバックは、それは実際に私は期待のように、他のコンポーネントでgetSomeData関数内に入り正常に動作しているこれは何

add() { 
// do some stuff 
this.service.runRefreshCallback(); 
} 

のようにボタンを追加しますが、私はエラーを取得するとき、私はちょうどrefreshCallbackたびに実行モーダルthis.service.getData ()は定義されていないbla bla bla ...だから私はコールバック関数が独自のコンポーネントでthis.serviceを表示しない理由を理解していない、それはngInitで動作し、すべてのデータをロードし、必要なものを行うが、リフレッシュコールバックが開始されましたか?

+0

フルサービスとコンポーネントコードまたは複製を共有してください – amal

答えて

1

あなたは以下のようにそれを渡したときにあなたのコンテキストthis内部getSomeData機能が失われる:

ngOnInit() { 
    this.service.setRefreshCallback(this.getSomeData); 
} 

を、これはあなたが矢印関数内で、この関数を渡す場所ラップ修正するには:

ngOnInit() { 
    this.service.setRefreshCallback(() => this.getSomeData()); 
} 

参照をred flags for this in the TypeScript documentation

+0

実際には、すでにインスタンスメソッドとしてgetSomeDataを使用していますが、これは動作していますが、コールバックはそこに入りますが、this.serviceはgetSomeData関数コールバックを入力するとき) –

+0

上記のように矢印関数で 'getSomeData'をラップしようとしましたか? – Saravana

+0

いいえ、今日は何をしようとしているのですが、それが機能すれば解決策としてあなたの答えを記します。 –

関連する問題