如何在ES5升级注入角1服务/工厂角2分量？ [英] How to inject upgraded Angular 1 service/factory to Angular 2 component in ES5?

问题描述

我有一个Angular1服务与名称，比如'为myService

I have an Angular1 service with name, say, 'myService'

然后我用Angular2 UpgradeAdapter这样的升级是：

I then upgraded it using the Angular2 UpgradeAdapter like this:

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

现在我需要把它注入到angular2组件。官方升级指南只有打字稿版本现在。在打字稿您使用@Inject anotation的服务名称它像这样：

Now I need to inject it to the angular2 component. Official upgrade guide only has typescript version for now. In typescript you use @Inject anotation with the service name for it like so:

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

什么是语法使用ES5的名字注射服务？

What is the syntax for injecting a service by name using ES5?

推荐答案

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

To complete the pixelbits' answer, you need also define my service within the providers list either:

• 在应用层面

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应用程序或每个组件的所有元素

It depends on what you want to do: share your service instance for all elements in the Angular2 application or per component.

这个答案可以给依赖注入的Angular2与ES5更多详细信息：<一href=\"http://stackoverflow.com/questions/34644887/dependency-injection-in-angular-2-with-es5/34653438#34653438\">Dependency注射角2 ES5 。

This answers could give more details on dependency injection in Angular2 with ES5: Dependency Injection in Angular 2 with ES5.

修改

其实，有一个精妙。在升级的情况下，你不需要使用 ng.platform.browser.bootstrap 功能，但是从升级对象。

In fact, there is a subtlety. IN the case of upgrade you need not to bootstrap using the ng.platform.browser.bootstrap function but the one from the upgrade object.

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

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

Where heroApp is the Angular1 module containing services and factories I want to use in the Angular2 application.

在事实上，当你调用 upgradeNg1Provider 方法上的升级，相应的供应商正在与其相关的喷油器内注册。这意味着，你不需要在上述指定它们。

In fact, when you call the upgradeNg1Provider method on the upgrade, corresponding providers are registered within its associated injector. This means that you don't need to specify them at described above.

所以，你只需要做到这一点，你要注入：

So you simply need to do that where you want to inject:

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

MISKO Hevery为此提供了一个巨大的plunkr： http://plnkr.co/编辑/ yMjghOFhFWuY8G1fVIEg？p = preVIEW 。

希望它可以帮助你，
蒂埃里

Hope it helps you, Thierry

这篇关于如何在ES5升级注入角1服务/工厂角2分量？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！