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

一尘不染

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

angularjs

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

然后，我使用Angular2 UpgradeAdapter对其进行了升级，如下所示：

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

现在，我需要将其注入angular2组件。官方升级指南目前仅具有打字稿版本。在打字稿中，您可以使用@Inject注释及其服务名称，如下所示：

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

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

阅读 256

2020-07-04

共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中的依赖项注入的更多详细信息：使用ES5的Angular
2中的依赖项注入

编辑

其实有一个微妙之处。在升级的情况下，您不需要使用该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 。

希望对您有帮助，蒂埃里

2020-07-04