首先,让我说我仍在使用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 服务,用于在覆盖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
属性。
订阅从未被调用,所以我想我在这里做了一些非常错误的事情。
任何帮助将不胜感激。
删除
providers: [overlayLoaderService]
从 OverlayLoader组件应该可以工作,因为提供程序已经添加到适配器中。否则,角度 1 组件和角度 2 组件似乎正在使用该服务的不同实例。