如何将升级的 Angular 1 服务/工厂注入 ES5 中的 Angular 2 组件? [英] How to inject upgraded Angular 1 service/factory to Angular 2 component in ES5?

问题描述

我有一个名为myService"的 Angular1 服务

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 注释和服务名称，如下所示:

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.

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

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

编辑

其实是有讲究的.在升级的情况下，您不需要使用 ng.platform.browser.bootstrap 函数进行引导，而是使用来自 upgrade 对象的函数.

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

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

Miško Hevery provides a great plunkr for this: http://plnkr.co/edit/yMjghOFhFWuY8G1fVIEg?p=preview.

希望对你有帮助蒂埃里

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