Access variables declared a component from a RxJS subscribe() function

Question

I am able to use this.variable to access variables in any part of the component, except inside RxJS functions like subscribe() or catch().

In the example below, I want to print a message after running a process:

import {Component, View} from 'angular2/core';

@Component({
    selector: 'navigator'
})
@View({
    template: './app.component.html',
    styles: ['./app.component.css']
})
export class AppComponent {
    message: string;

    constructor() {
        this.message = 'success';
    }

    doSomething() {
        runTheProcess()
        .subscribe(function(location) {
            console.log(this.message);
        });
    }
}

When I run doSomething(), I get undefined. This scenario can be solved using a local variable:

import {Component, View} from 'angular2/core';

@Component({
    selector: 'navigator'
})
@View({
    template: './app.component.html',
    styles: ['./app.component.css']
})
export class AppComponent {
    message: string;

    constructor() {
        this.message = 'success';
    }

    doSomething() {

        // assign it to a local variable
        let message = this.message;

        runTheProcess()
        .subscribe(function(location) {
            console.log(message);
        });
    }
}

I suppose this is related to the this, however, why I can't access the this.message inside the subscribe()?

arrow functions basarat.gitbooks.io/typescript/content/docs/… — basarat
– basarat, Commented Jan 7, 2016 at 5:16

drew moore · Accepted Answer · 2016-01-07 05:04:30Z

40

This has nothing to do with rx or angular, and everything to do with Javascript and Typescript.

I assume you're familiar with the semantics of this in the context of function invocations in Javascript (if not, there are no shortage of explanations online) - those semantics apply in the first snippet, of course, and that's the only reason this.message is undefined inside subscribe()there. That's just Javascript.

Since we're talking about Typescript: Arrow functions are a Typescript construct intended (in part) to sidestep the awkwardness of these semantics by lexically capturing the meaning of this, meaning that this inside an arrow function === this from the outer context.

So, if you replace:

.subscribe(function(location) {
        //this != this from outer context 
        console.log(this.message); //prints 'undefined'
    });

by:

.subscribe((location) => {
     //this == this from the outer context 
        console.log(this.message); //prints 'success'
    });

You'll get your expected result.

edited Jan 7, 2016 at 5:04

answered Jan 7, 2016 at 4:44

drew moore

32.8k17 gold badges79 silver badges113 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user4079725 Over a year ago

I know this is an old question - but when I follow your answer and run my application in google chrome I get a page crash - memory error.. any idea?

etlds Over a year ago

Is there any quick solution to reference the outer 'this' in the fat arrow function?

Mahesh Over a year ago

@etlds, if you are talking about referencing "this" while debugging, then you can watch for _this Otherwise, internally, the "this" refers to the outside context (when used in arrow function)

HankCa · Accepted Answer · 2019-04-17 06:46:40Z

As an alternative to @drewmoore's answer, if you wish to have external functions you can do:

 .subscribe((location) => dataHandler(location), (error) => errorHandler(error));

 ....

 const dataHandler = (location) => {
     ...
 }

By externalising the errorHandler function, it can be used in multiple places (ie. subscriptions). By having as (fat) arrow functions your code will capture the 'this' context (as discussed in @Drewmoore's answer).

What is lacking is the ability to write the following and have handled like an arrow function. The following works and passes the argument implicitly. Unfortunately AFAIK you cannot capture the this context (perhaps use bind to achieve this, though that makes the code more verbose overall).

 .subscribe(dataHandler, errorHandler);

This is soooo succinct! But alas won't work if the context is required.

Collectives™ on Stack Overflow

Access variables declared a component from a RxJS subscribe() function

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related