2016-11-18 4 views
2

У меня проблема в одном из моих компонентов в Angular2, где «это» связано с неправильным контекстом в одном из моих компонентов. У меня есть другие компоненты, где эта проблема не возникает, но я не вижу, в чем разница. Вот мой код:«это» обязывает подписку на функцию, а не внешнюю компоненту в Angular2

Компонент:

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 затем подписавшись на событие эмиттер, который вернулся из этой службы в конструкторе себя с " подписываться ". Как вы можете видеть из следующих строк я тогда наблюдал за события и в функции обратного вызова Я отображение ответа на некоторые локальные переменные компонентах:

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

Единственная проблема здесь состоит в том, что «это» не связанно правильный контекст. Когда я добавляю точку останова внутри этой функции подписки, она говорит, что «это» не определено. Я использую TypScript (функциональность ECMA6), поэтому функция стрелки имеет лексическую привязку и определена в контексте конструктора, поэтому «это» должно быть связано с компонентом? Как я уже сказал, у меня есть другие компоненты, которые имеют те же функции, которые не имеют проблем с «этим» контекстом, поэтому я смущен, почему это происходит. Может ли кто-нибудь обнаружить, где я ошибся?

Благодаря

ответ

4

Я не видел картину, которая вызывает проблемы в вашем коде, но обычно это вызвано

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() 
    }