如何在 ES5 中将升级的 Angular 1 服务/工厂注入到 Angular 2 组件？答案

【问题标题】：How to inject upgraded Angular 1 service/factory to Angular 2 component in ES5?如何在 ES5 中将升级的 Angular 1 服务/工厂注入到 Angular 2 组件？
【发布时间】：2016-01-20 12:39:35
【问题描述】：

我有一个名为“myService”的 Angular1 服务

然后我像这样使用 Angular2 UpgradeAdapter 升级它：

var upgradeAdapter = new ng.upgrade.UpgradeAdapter();
upgradeAdapter.upgradeNg1Provider('myService');

现在我需要将它注入到 angular2 组件中。官方升级指南目前只有 typescript 版本。在打字稿中，您可以使用带有服务名称的 @Inject 注释，如下所示：

export class MyComponent {
  constructor(@Inject('myService') service:MyService) {
    ...
  }
}

使用 ES5 按名称注入服务的语法是什么？

【问题讨论】：

标签： angularjs angular

【解决方案1】：

要完成 pixelbits 的回答，您还需要在提供者列表中定义我的服务：

在应用程序级别

document.addEventListener('DOMContentLoaded', function() {
  ng.platform.browser.bootstrap(Cmp, [MyService]);
});

在组件级别

var Cmp = ng.core.
 Component({
   selector: 'cmp',
   providers: [ MyService ]
 }).
 (...)
 Class({
   constructor: [MyService, function(service) {
   }]
 });

这取决于您想要做什么：为 Angular2 应用程序中的所有元素或每个组件共享您的服务实例。

这个答案可以提供更多关于在 Angular2 中使用 ES5 进行依赖注入的详细信息：Dependency Injection in Angular 2 with ES5。

编辑

其实有一个微妙之处。在升级的情况下，您不需要使用ng.platform.browser.bootstrap 函数进行引导，而是使用来自upgrade 对象的函数。

upgrade.bootstrap(document.body, ['heroApp']);

heroApp 是 Angular1 模块，其中包含我想在 Angular2 应用程序中使用的服务和工厂。

实际上，当您在升级时调用upgradeNg1Provider 方法时，相应的提供程序会在其关联的注入器中注册。这意味着您不需要在上面指定它们。

所以你只需要在你想注入的地方做这个：

(...)
Class({
  constructor: [ ng.core.Inject('customService'),
                 ng.core.Inject('customFactory'),
                 function(cService, cFactory) {
  }]
});

Miško Hevery 为此提供了一个很好的解决方案：http://plnkr.co/edit/yMjghOFhFWuY8G1fVIEg?p=preview。

希望对你有帮助蒂埃里

【讨论】：

感谢您的回答。它看起来像按类型注入。但我实际上没有 MyService 类/函数。服务声明如下：myModule.factory('myService', [function () {...}])。或者这个类/函数是在升级过程中以某种方式创建的？
我无法与 Angular1 工厂合作。我希望有这样的东西：constructor: [ new ng.core.Inject('customFactory'), function(cFactory) { (...) }]。但我有以下错误：No provider for customFactory! (class1 -> customFactory)。事实上，我不知道在提供者列表（应用程序或组件级别）中放置什么。我尝试了ng.core.provide 函数但没有成功...
我为此在 Github 中创建了一个问题：github.com/angular/angular/issues/6588。
Miško Hevery 回答了这个问题 ;-) 我用一个可行的解决方案更新了我的答案......

【解决方案2】：

对服务的构造函数 DI 使用数组表示法：

.Class({
    constructor: [MyService, function (service) {
      ...
 }],

【讨论】：