问题描述
我可以使用 this.variable
来访问组件任何部分的变量,但在RxJS函数中除外,例如 subscribe()
或 catch()
。
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);
});
}
}
当我运行 doSomething( )
,我得到未定义。这个场景可以使用局部变量来解决:
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);
});
}
}
我想这与<$ c $有关c>这个,但是,为什么我无法访问 subscribe() this.message
c $ c>?
I suppose this is related to the this
, however, why I can't access the this.message
inside the subscribe()
?
推荐答案
这与rx或angular无关,而且与Javascript和Typescript有关。
This has nothing to do with rx or angular, and everything to do with Javascript and Typescript.
我假设您在Javascript函数调用的上下文中熟悉这个
的语义(如果没有) ,有) - 这些语义适用当然,在第一个片段中,这是 this.message
在 subscribe()
中未定义的唯一原因。那只是Javascript。
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.
因为我们在谈论的是Typescript:
是一个Typescript构造,旨在(部分)通过词汇捕捉这个
的含义来回避这些语义的尴尬,这意味着此
在箭头函数内=== 来自外部上下文的
。
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.
所以,如果你替换:
.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'
});
您将获得预期的结果。
这篇关于访问变量从RxJS subscribe()函数声明了一个组件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!