Zugriff auf Variablen, die eine Komponente aus einem RxJS subscribe () - Funktion

Ich bin in der Lage zu verwenden this.variable um auf Variablen zuzugreifen, die in jedem Teil der Komponente, außer in den RxJS Funktionen wie subscribe() oder catch().

Im Beispiel unten, ich will so drucken Sie eine Nachricht nach dem ausführen eines Prozesses:

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

Wenn ich doSomething() bekomme ich undefined. Dieses Szenario kann gelöst werden, verwenden Sie eine lokale 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);
        });
    }
}

Ich nehme an, dies ist im Zusammenhang mit der this jedoch, warum kann ich nicht auf die this.message innerhalb der subscribe()?

InformationsquelleAutor Haoliang Yu | 2016-01-07
  1. 35

    Dies hat nichts zu tun mit rx oder eckig, und alles, was mit Javascript und Typescript.

    Ich nehme an, Sie sind vertraut mit der Semantik von this im Rahmen der Funktionsaufrufe in Javascript (wenn nicht, gibt es kein Mangel an Erklärungen online) - die Semantik gelten in Erster snippet, natürlich, und das ist der einzige Grund this.message undefined innen subscribe()es. Das ist nur Javascript.

    Da reden wir über Typescript:
    Pfeil-Funktionen sind ein Typoskript, konstruieren soll (zum Teil) zu umgehen die Unbeholfenheit dieser Semantik durch lexikalisch erfassen der Bedeutung von this, was bedeutet, dass this im inneren ein Pfeil-Funktion === this aus dem äußeren Kontext.

    Also, wenn Sie ersetzen: 

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

    durch: 

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

    Erhalten Sie das erwartete Ergebnis.

    • Ganz klare Antwort. Vielen Dank
    • Ich weiß, das ist eine alte Frage - aber wenn ich Folgen Sie Ihre Antwort und führen Sie die Anwendung im google chrome bekomme ich eine Seite crash - Speicher Fehler.. keine Ahnung?
    • Gibt es eine schnelle Lösung Referenz der äußeren 'dieser' in der Fett-Pfeil-Funktion?
    • wenn Sie reden, verweisen auf "das" beim Debuggen, dann könnt Ihr Euch für _diese Sonst, intern, "diese" bezieht sich auf die außerhalb der Rahmen (bei Verwendung in Pfeil-Funktion)
    • Danke, Das ist sehr nützlich!
    InformationsquelleAutor awqueous
  2. 0

    Als alternative zu @drewmoore Antwort, wenn Sie möchten, haben die externen Funktionen, die Sie tun können:

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

 ....

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

    Durch externalising die errorHandler - Funktion, es kann verwendet werden, an mehreren Orten (dh. Abonnements). Indem er so (Fett) Pfeil-Funktionen, die Ihr code wird die Aufnahme der "this" - Kontext (wie besprochen @Drewmoore Antwort).

    Was fehlt, ist die Fähigkeit zu schreiben, die folgenden und haben Sie behandelt wie ein Pfeil-Funktion. Folgende arbeiten und übergibt das argument implizit. Leider ist, soweit ich weiß, können Sie nicht erfassen, die this Umfeld (vielleicht verwenden bind um dies zu erreichen, aber das macht den code Ausführlicher insgesamt).

     .subscribe(dataHandler, errorHandler);

    Das ist soooo lapidar! Aber leider funktioniert nicht, wenn der Kontext erforderlich ist.

    InformationsquelleAutor HankCa
Schreibe einen Kommentar