L'accès à des variables déclarées d'un composant à partir d'un RxJS subscribe() la fonction

Je suis en mesure d'utiliser this.variable pour accéder à des variables dans une partie de la composante, sauf à l'intérieur de RxJS fonctions comme subscribe() ou catch().

Dans l'exemple ci-dessous, je veux imprimer un message après l'exécution d'un processus:

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

Quand je lance doSomething(), je reçois undefined. Ce scénario peut être résolu en utilisant une variable locale:

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

Je suppose que cela est lié à la this, cependant, pourquoi je ne peux pas accéder à la this.message à l'intérieur de la subscribe()?

flèche de fonctions basarat.gitbooks.io/tapuscrit/content/docs/...

OriginalL'auteur Haoliang Yu | 2016-01-07

  1. 31

    Cela n'a rien à voir avec rx ou angulaire, et tout à voir avec le Javascript et le Tapuscrit.

    Je suppose que vous êtes familier avec la sémantique de this dans le cadre des appels de fonction en Javascript (si non, il y a ne manque pas d'explications en ligne) - ceux de la sémantique s'appliquent dans le premier extrait, bien sûr, et c'est la seule raison this.message est pas défini à l'intérieur de subscribe(). C'est juste du Javascript.

    Puisque nous parlons de la Machine:
    Flèche fonctions sont un Tapuscrit de construire prévu (en partie) au détriment de la maladresse de ces sémantique par lexicalement capturer le sens de this, ce qui signifie que this l'intérieur d'une flèche fonction === this à partir de l'extérieur du contexte.

    Donc, si vous remplacez: 

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

    par: 

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

    Vous obtiendrez le résultat escompté.

    Réponse très claire. Merci beaucoup
    Je sais que c'est une vieille question - mais quand j'ai suivi votre réponse et exécuter mon application dans google chrome, j'obtiens une page crash - erreur de mémoire.. une idée?
    Est-il une solution rapide pour faire référence à l'extérieur de " il " dans la graisse de la flèche de la fonction?
    si l'on parle de référencement "cette" pendant le débogage, puis vous pouvez regarder pour _ce Sinon, en interne, le "il" se réfère à l'extérieur du contexte (lorsqu'il est utilisé en flèche de la fonction)

    OriginalL'auteur drewmoore