使用胖箭头语法*并且*声明返回类型的Angular / TypeScript方法的语法是什么？

Question

我正在使用Angular6。在下面的简化代码中，我有一个名为getActive（）的方法。在这种方法中，我想访问this.active的值，但是this对象不在范围内。

如何对此应用粗箭头语法，以便可以在方法内部访问this.active的值？我搜寻了网络并尝试了我能想到的所有可能的语法，但是没有一个可以编译。

export class PlayerComponent implements OnInit {

  active: boolean;   
  isActive: Observable<boolean> = this.getActive();

  constructor() {
      this.active = false;
  }

  getActive(): Observable<boolean> {
      return of(this.active);
  }

}

请注意，当我在getActive()方法中手动设置返回值时，我的应用程序运行良好，例如：return of(false);只是无法访问this.active的值。

Answer 1

问题不是由于this或箭头函数的绑定，而是归因于初始化的顺序。首先调用字段初始化器（并因此调用getActive方法），然后才执行其余构造函数。您可以在为es5生成的代码中看到这一点：

var PlayerComponent = /** @class */ (function () {
    function PlayerComponent() {
        this.isActive = this.getActive(); // active not set yet
        this.active = false;
    }
    PlayerComponent.prototype.getActive = function () {
        return of(this.active);
    };
    return PlayerComponent;
}());

最简单的解决方案是在可控制顺序的构造函数中移动可观察对象的初始化：

export class PlayerComponent implements OnInit {

    active: boolean;
    isActive: Observable<boolean>;

    constructor() {
        this.active = false;
        this.isActive = this.getActive();
    }

    getActive(): Observable<boolean> {
        return of(this.active);
    }

}