Bir RxJS subscribe() işlevi içinde bileşen değişkenleri alamadı

Question

Bu, yazı tipinin kapsam ve değişken erişilebilirliği hakkında daha genel bir soru olabilir.

veya catch() gibi RxJS işlevleri dışında, bileşenlerin herhangi bir bölümünde değişkenler almak için this.variable'u kullanabilirim. Örneğin, ben bir işlemi çalıştırdıktan sonra bir ileti yazdırmak istiyorum: Ben doSomething() çalıştırdığınızda

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

, bir tanımsız alacak. Bu, yerel bir değişken kullanarak sabitlenebilir:

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

Bu this ilgilidir varsayalım. Ancak neden subscribe() değil doSomething()'da this.message'dan ileti alabilirim?

Answer 1

Bu, rx veya açısal ile hiçbir ilgisi yoktur ve Javascript ve Typescript ile ilgili yapılacaklar. Bu semantik elbette ilk snippet'te uygulamak ve bu this.message tek nedeni var -

I (no shortage of explanations online vardır, değilse) Eğer JavaScript işlevi çağırmaları bağlamında this semantik aşina olduğu varsayılmıştır subscribe() içinde tanımlanmamış. Bu sadece Javascript.

biz typescript sözettiğimize: Arrow functions (kısmen) amaçlanan bir typescript yapısı vardır, yani lexically this anlamını yakalayarak bu semantik beceriksizlik kaçınmak için bir ok işlevi içinde this o === this dan dış bağlam.

Yani, değiştirirseniz:

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

tarafından:

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

Sen beklenen sonucu elde edersiniz.