简体   繁体   中英

Inject Upgraded Service Into Component

I have a service called Example that I used in my angular 1 application. It has angular 1 dependencies, $resource, $http, $q and I would like to use it in my angular 2 service.

However below is how I'm attempting to implement the upgrade.

var ExampleService = require('./service.js');

angular.module('angular-legacy',[]).service('example', ExampleService);
upgradeAdapter.upgradeNg1Provider('example');

var AppComponent =
  ng.core.Component({
    selector: 'app',
    providers: [ExampleService]
  })
  .View({
    template: ' <div>Hello </div> ',
  })
  .Class({
    constructor: [ExampleService, function (service) {
      console.log(service);
    }]
  });

I get an error along these lines.

cannot resolve all parameters for 'ExampleService'(?, ?, ?, ?, ?).

Is there a way I can inject the upgraded version of ExampleService?

After some struggle I figured this out. I packaged everything up in a small example to make it easy for those who come across this in the future.

https://github.com/danielrasmuson/Angular2-Use-Angular1Service-ES5

Here is the meat of it.

var core = require('angular2/core');
var bootstrap = require('angular2/platform/browser').bootstrap;
var UpgradeAdapter = require('angular2/upgrade').UpgradeAdapter;
var ng = {
    core: core
}

var AppComponent = 
    ng.core.Component({
        selector: 'app'
    })
    .View({
        template: '<h1>working</h1>'
    })
    .Class({
        constructor: function(pinsService){
            pinsService.working();
        }
    });

AppComponent.parameters = [new ng.core.Inject('PinsService')];

angular.module('interestApp', [])
.service('PinsService', function($http, $q) {
    this.working = function(){
        alert('servicce working');
    }
});

var upgradeAdapter = new UpgradeAdapter();
angular.module('interestApp')
  .directive('app', upgradeAdapter.downgradeNg2Component(AppComponent))
upgradeAdapter.upgradeNg1Provider('PinsService');

upgradeAdapter.bootstrap(document.body, ['interestApp']);

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM