angularjs - 如何将升级后的 Angular 1 服务/工厂注入(inject)到 ES5 中的 Angular 2 组件？

Question

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

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

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

现在我需要将它注入(inject)到 angular2 组件中。官方升级指南目前只有typescript版本。在 typescript 中，您使用 @Inject 注释和服务名称，如下所示:

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

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

Answer 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 应用程序中的所有元素或每个组件共享您的服务实例。

此答案可以提供有关使用 ES5 在 Angular2 中进行依赖注入(inject)的更多详细信息:Dependency Injection in Angular 2 with ES5 .

编辑

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

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

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

事实上，当您在升级时调用 upgradeNg1Provider 方法时，相应的提供程序会在其关联的注入(inject)器中注册。这意味着您无需按照上述说明指定它们。

所以你只需要在你想注入(inject)的地方做:

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

Miško Hevery 为此提供了一个很好的插件:http://plnkr.co/edit/yMjghOFhFWuY8G1fVIEg?p=preview .

希望对你有帮助，蒂埃里