'this'绑定为订阅功能，而不是Angular2中的外部组件范围 [英] 'this' bound to subscribe function and not outer component scope in Angular2

问题描述

我在Angular2的一个组件中遇到问题，因为"this"绑定到我的一个组件中的错误上下文.我还有其他组件没有发生此问题，但看不出有什么区别.这是我的代码:

I am having an issue in one of my components in Angular2 where as 'this' is bound to wrong context within one of my components. I have other components where this issue is not occurring but I cannot see what the difference is. Here is my code:

组件:

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;
            },
            () => {

            },
            () => {

            }
        )
    }
}

在我的构造函数中，您可以看到我正在依赖注入文件服务，然后使用订阅"功能订阅了事件发射器，该事件从该服务在构造器自身内部返回.从下面几行中可以看到，然后我监视事件，并在回调函数中将响应映射到一些本地组件变量:

Inside my constructor function you can see I am dependency injecting the filesService then subscribing to an Event Emitter that is returned from this service within the constructor itself with the 'subscribe' function. As you can see from the following lines I am then watching for events and in the callback function I am mapping a response to some local component variables:

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

这里唯一的问题是"this"未绑定到正确的上下文.当我在该订阅函数内添加断点时，它说的是"this"未定义.我正在使用Typescript(ECMA6功能)，所以arrow函数具有此绑定的词汇，并且是在构造函数的上下文中定义的，因此"this"应绑定到组件吗?就像我说的那样，我还有其他具有相同功能的组件，这些组件在"this"上下文中没有问题，所以我对为什么会发生这种情况感到困惑.谁能发现我出问题了?

The only problem here is that 'this' is not bound to the correct context. When I add a breakpoint inside that subscribe function it is saying 'this' is not defined. I am using Typescript (ECMA6 functionality) so the arrow function has lexical this binding and is defined in the context of the constructor so 'this' should be bound to the component? As I said I have other components which have the same functionality which have no problems with the 'this' context so I am confused as to why this is happening. Can anyone spot where I have gone wrong?

谢谢

推荐答案

我没有在代码中看到导致问题的模式，但通常是由

I haven't seen the pattern that causes the issue in your code, but commonly it's caused by

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

这篇关于'this'绑定为订阅功能，而不是Angular2中的外部组件范围的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！