angularjs – 如何将升级的Angular 1服务/工厂注入ES5中的Angula

发布时间：2020-12-17 17:44:11 所属栏目：安全来源：网络整理

导读：我有一个名字的Angular1服务,比如’myService’ 然后我使用Angular2 UpgradeAdapter升级它,如下所示： var upgradeAdapter = new ng.upgrade.UpgradeAdapter();upgradeAdapter.upgradeNg1Provider('myService'); 现在我需要将它注入angular2组件.官方升级指

我有一个名字的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按名称注入服务的语法是什么？

解决方法

要完成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：Dependency Injection in Angular 2 with ES5的依赖注入的更多细节.

编辑

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

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.

希望它能帮到你,蒂埃里

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!