Каков синтаксис метода Angular / TypeScript, который использует синтаксис жирной стрелки * и * объявляет тип возвращаемого значения? - PullRequest
Новая
       5

Каков синтаксис метода Angular / TypeScript, который использует синтаксис жирной стрелки * и * объявляет тип возвращаемого значения?

0 голосов
/ 04 июля 2018

Я использую Angular 6. В следующем упрощенном коде у меня есть метод с именем 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.

1 Ответ

0 голосов
/ 04 июля 2018

Проблема не в привязке функций 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);
    }

}
...