nicht in der Lage, Komponentenvariablen innerhalb einer RxJS subscribe() Funktion zu erhalten

Question

Dies kann eine allgemeinere Frage über den Umfang und die variable Erreichbarkeit von Typoskript sein.

Ich kann this.variable verwenden, um Variablen in jedem Teil der Komponente zu erhalten, außer RxJS-Funktionen wie subscribe() oder catch(). Zum Beispiel möchte ich nach dem Ausführen eines Prozesses eine Nachricht drucken:

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

Als ich doSomething() laufen, werde ich eine undefined bekommen. Dies kann durch eine lokale Variable festgelegt werden:

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

Ich nehme an, dies zu this zusammenhängt. Aber warum kann ich eine Nachricht von this.message in doSomething(), nicht subscribe() bekommen?

Answer 1

Das hat nichts mit Rx oder eckigen zu tun, und alles mit Javascript und Typescript zu tun.

Ich nehme an, Sie mit der Semantik von this im Zusammenhang mit den Funktionsaufrufen in Javascript vertraut sind (wenn nicht, da no shortage of explanations online ist) - diese Semantik in dem ersten Schnipsel anwenden, natürlich, und das ist der einzige Grund, warum this.message ist undefiniert innerhalb subscribe() dort. Das ist nur Javascript.

Da reden wir über Typoskript: Arrow functions sind ein Typoskript Konstrukt bestimmt sind (teilweise) die Peinlichkeit dieser Semantik zu umgehen, indem lexikalisch die Bedeutung von this erfassen, was bedeutet, dass this innerhalb einer Pfeil Funktion === this aus der äußere Kontext.

Also, wenn Sie ersetzen:

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

von:

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

Sie werden Ihr erwartetes Ergebnis.