javascript - Angular2 + Angular1 + ES5 syntax component subscription -
first of let me still using es5, because writing frontend of google apps scripts application , didn't have time/patience make typescript work.
i using method in order upgrade angular1 app angular2:
http://www.codelord.net/2016/01/07/adding-the-first-angular-2-service-to-your-angular-1-app/
i have overlayloaderservice service show loading spinner in overlay div simple functions , set loading state, , overlayloader component show div itself.
service:
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));
component:
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));
what trying achieve component update loading
property when call setstate() method in overlayloaderservice.
the subscription never called, guess doing terribly wrong here.
any appreciated.
remove
providers: [overlayloaderservice]
from overlayloadercomponent should work, provider has been added adapter. otherwise, seems angular 1 component , angular 2 component using different instance of service.
Comments
Post a Comment