Angular 15本地Observable订阅回调无法访问组件变量问题咨询

你遇到的核心问题是普通函数作为回调时，this的指向发生了偏移——next(x) {}这种普通函数内部的this不再指向AppComponent实例，因此无法访问组件的message1变量。以下是几种直接有效的解决方式：

解决方法1：改用箭头函数定义回调 #

箭头函数会自动继承外部作用域的this，直接指向组件实例，这是最简洁常用的写法：

public getUser() {
    this.observable.subscribe({
      next: (x) => {
        this.message1 = 'got value ' + x;
      },
      error: (err) => {
        console.error('something wrong occurred: ' + err);
      },
      complete: () => {
        console.log('done');
      },
    });
    console.log('just after subscribe');
}

解决方法2：提前保存组件实例的this #

在订阅前把组件的this存入变量，回调里直接使用该变量：

public getUser() {
    const componentThis = this;
    this.observable.subscribe({
      next(x) {
        componentThis.message1 = 'got value ' + x;
      },
      error(err) {
        console.error('something wrong occurred: ' + err);
      },
      complete() {
        console.log('done');
      },
    });
    console.log('just after subscribe');
}

解决方法3：用bind绑定this #

给普通函数回调手动绑定组件的this，强制指定其指向：

public getUser() {
    this.observable.subscribe({
      next: function(x) {
        this.message1 = 'got value ' + x;
      }.bind(this),
      error(err) {
        console.error('something wrong occurred: ' + err);
      },
      complete() {
        console.log('done');
      },
    });
    console.log('just after subscribe');
}

内容的提问来源于stack exchange，提问作者Yogi Bear