将升级的服务注入组件答案

【问题标题】：Inject Upgraded Service Into Component将升级的服务注入组件
【发布时间】：2023-03-16 05:37:02
【问题描述】：

我有一个名为 Example 的服务，我在 angular 1 应用程序中使用了它。它具有 angular 1 依赖项$resource, $http, $q，我想在我的 angular 2 服务中使用它。

但下面是我尝试实施升级的方式。

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);
    }]
  });

我在这些方面遇到了错误。

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

有没有办法注入升级版的 ExampleService？

【问题讨论】：

请参阅"Should questions include “tags” in their titles?"，其中的共识是“不，他们不应该”！

标签： javascript angularjs angular

【解决方案1】：

经过一番挣扎，我明白了这一点。我将所有内容打包在一个小示例中，以方便将来遇到此问题的人使用。

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

这就是它的核心。

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']);

【讨论】：