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

Question

我有一个名字的Angular1服务,比如'myService'

然后我使用Angular2 UpgradeAdapter升级它,如下所示:

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

现在我需要将它注入angular2组件.官方升级指南目前只有打字稿版本.在打字稿中你使用@Inject anotation和服务名称,如下所示:

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

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

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

这个答案可以提供更多关于Angular2中ES5依赖注入的细节:Angular 2中的依赖注入ES5.

编辑

事实上,有一个微妙之处.在升级的情况下,您不需要使用ng.platform.browser.bootstrap函数来引导,而是使用upgrade对象中的函数.

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

heroAppAngular1模块在哪里包含我想在Angular2应用程序中使用的服务和工厂.

实际上,当您upgradeNg1Provider在升级时调用该方法时,相应的提供程序将在其关联的注入器中注册.这意味着您不需要如上所述指定它们.

所以你只需要在你想要注入的地方做到这一点:

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

MiškoHevery为此提供了一个很好的吸引力:http://plnkr.co/edit/yMjghOFhFWuY8G1fVIEg？p = preview .

希望它对你有帮助,蒂埃里