Question

我正在使用带有TypeScript和ES6模块的Angular 1（通过SystemJS加载），并想知道导入依赖注入服务的良好做法。

这是组件：

// foo.component.ts
import { DummyService } from  './dummy.service';

class FooCtrl {
    constructor (
       dummyService: DummyService // ERROR: [$injector:unpr] Unknown provider: dummyServiceProvider <- dummyService
    ) {
       dummyService.go();
    }
}

angular.module('app')
  .component('foo', {
    template: 'Hello World',
    controller: FooCtrl
});

// console.log(DummyService); // uncommenting this line 'fixes' the problem

和服务：

// dummy.service.ts    
export class DummyService () {
    go () {
      console.log('go');
    }
}
angular.service('dummyService', DummyService);

上面的代码段会根据评论引发错误。问题是文件dummy.service.ts没有在转换后的代码中导入 - 在转换过程中TypeScript会忽略它，因为它只用在FooCtrl构造函数中的类型注释中。只要在实际代码中使用导入的变量，错误就会消失。可能的解决方案如下。

强制导入服务文件：

import { DummyService } from  './dummy.service';
import './dummy.service'; // this works but it's not elegant and breaks DRY

模仿ng2，以便TS编译器看到正在使用的DummyService类：

angular.module('app')
  .component('foo', {
    template: 'Hello World',
    controller: FooCtrl,
    providers: [DummyService] // fixes the issue, the providers property has no effect on the ng application
});

有什么想法吗？

TypeScript和Angular 1 DI

0 个答案: