Angular2 + Angular1 + ES5語法組件訂閱

Question

首先，我要說我仍在使用ES5，主要是因為我是為Google Apps Scripts應用程序的前端編寫的，而沒有時間/耐心來使TypeScript正常工作。

我目前正在使用此方法將Angular1應用程序升級到Angular2：

http://www.codelord.net/2016/01/07/adding-the-first-angular-2-service-to-your-angular-1-app/

我有一個overlayLoaderService服務，用於顯示overlay div中的加載微調器，其中包含用於獲取和設置加載狀態的簡單函數，以及一個overlayLoader組件，用於顯示div本身。

服務：

var overlayLoaderService = ng.core.
  Injectable().
  Class({
    constructor: function() {
      this.loading = false;
      this.stateChange = new ng.core.EventEmitter();
    },
    setState: function(state) {
      this.loading.value = state;
      this.stateChange.emit(state);
    },
    getState: function() {
      console.log(this.loading);
    }
  });

upgradeAdapter.addProvider(overlayLoaderService);
angular.module('Gojira').factory('overlayLoaderService', upgradeAdapter.downgradeNg2Provider(overlayLoaderService));

零件：

var OverlayLoaderComponent = ng.core
  .Component({
    selector: 'overlay-loader',
    template: '<div [hidden]="loading" id="overlay-loader"></div>',
    providers: [overlayLoaderService]
  }).Class({
    constructor: [overlayLoaderService, function(overlayLoaderService) {
      this.loading = !overlayLoaderService.loading.value;
      this._subscription = overlayLoaderService.stateChange.subscribe(function (value) {
        console.log(value);
        this.loading = !value;
      });
    }],
  });

angular.module('Gojira').directive('overlayLoader', upgradeAdapter.downgradeNg2Component(OverlayLoaderComponent));

我要嘗試實現的是當我在overlayLoaderService中調用setState（）方法時更新其loading屬性的組件。

訂閱從未被調用，所以我想我在這里做錯了什么。

任何幫助，將不勝感激。

Answer 1

去掉

providers: [overlayLoaderService]

從OverlayLoaderComponent可以正常運行，因為提供程序已添加到適配器中。 否則，似乎角度1分量和角度2分量正在使用該服務的不同實例。