'this' bound to subscribe function and not outer component scope in Angular2

问题

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:

Component:

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;
            },

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?

Thanks

回答1:

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

function () { ... }

instead of

() => { ... }

or when functions are passed around like

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

instead of

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

来源：https://stackoverflow.com/questions/40672869/this-bound-to-subscribe-function-and-not-outer-component-scope-in-angular2

标签

javascript

angular

typescript

this