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

这个答案可以提供有关ES5中Angular2依赖注入的更多细节：Dependency Injection in Angular 2 with ES5。

修改

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

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

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

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

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

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

MiškoHevery为此提供了一个很好的傻瓜：http://plnkr.co/edit/yMjghOFhFWuY8G1fVIEg?p=preview。

希望它可以帮到你，亨利

Answer 2

将数组表示法用于服务的构造函数DI：

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

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

2 个答案: