'this'はSubscribe関数にバインドされていて、Angular2の外部コンポーネントスコープではありません

Question

私のコンポーネントの1つにAngular2の問題があります。私はこの問題が発生していない他のコンポーネントを持っていますが、違いは何か分かりません。ここに私のコードは次のとおりです。

コンポーネント：あなたは、私が 'でコンストラクタ自体の内部で、このサービスから返されるイベント・エミッターに加入し、その後filesServiceを注入被依存関係午前私のコンストラクタ関数内

import { Component, Input } from '@angular/core'; 
import { FilesService } from "./services/files.service"; 

@Component({ 
    selector: 'my-app', 
    moduleId: module.id, 
    templateUrl:'/app/views/app.html' 
}) 

export class AppComponent { 
    openFileUploader: boolean = false; 
    fileUploaderScope:any; 

    constructor (
     private _filesService: FilesService 
    ) { 
     let self = this; 
     _filesService.emitter.subscribe(
      (response) => { 
       this.fileUploaderScope = response.filters; 
       this.openFileUploader = response.open; 
      }, 
      () => { 

      }, 
      () => { 

      } 
     ) 
    } 
} 

を見ることができますサブスクライブする機能。あなたは、私は、その後のイベントを監視していますし、コールバック関数の中で、私はいくつかのローカルコンポーネント変数への応答をマッピングしています次の行から見ることができるように：

_filesService.emitter.subscribe(
      (response) => { 
       this.fileUploaderScope = response.filters; 
       this.openFileUploader = response.open; 
      }, 

ここでの唯一の問題は、「これは」にバインドされていないということです正しい文脈そのサブスクライブ関数の中にブレークポイントを追加すると、 'this'は定義されていないということです。私はTypescript（ECMA6機能）を使用しているので、矢印関数はこのバインディングをレキシカルに持ち、コンストラクタのコンテキストで定義されているので、 'これはコンポーネントにバインドする必要がありますか？ 私は言ったように、私はなぜこのことが起こっているのか混乱しているので、 'この'コンテキストに問題がない同じ機能を持つ他のコンポーネントを持っています。誰かが私が間違っている場所を見つけることができますか？

おかげ

Answer 1

私はあなたのコードで問題が発生するパターンを見ていないが、一般的には

function() { ... } 

代わりの

() => { ... } 

や関数が渡されることで引き起こされています〜のように

 _filesService.emitter.subscribe(
     (response) => { 
      this.fileUploaderScope = response.filters; 
      this.openFileUploader = response.open; 
     }, 
     errorHandler, 
     onCompleteHandler 
    } 

代わりに

 _filesService.emitter.subscribe(
     (response) => { 
      this.fileUploaderScope = response.filters; 
      this.openFileUploader = response.open; 
     }, 
     errorHandler.bind(this), 
     onCompleteHandler.bind(this) 
    } 

又は

 _filesService.emitter.subscribe(
     (response) => { 
      this.fileUploaderScope = response.filters; 
      this.openFileUploader = response.open; 
     }, 
     (error) => errorHandler(error), 
     () => onCompleteHandler() 
    }