Question

我的angular2应用有2个服务WebStorageService和MobileStorageService，它们实现了接口IStorageService。在我的main.component我使用WebStorageService引导应用程序，并在其中一个组件中尝试获取构造函数中的提供程序，如下所示，

// main.component
bootstrap(AppComponent,[WebStorageService])  // WebStorageService implements IStorageService interface

//AppComponent
import {IStorageService} from "./IStorageService"

@Component
export class AppComponent {

  constructor(private _storage: IStorageService) { } <-- throws an error Can't resolve all parameters for AppComponent

}

那么，有没有办法使用Interface作为类型提供服务？

Answer 1

我最终使用了angular2不透明的标记以及@rinukkusu的答案。

// main.component
bootstrap(AppComponent,[{provide: globalStorageService, {useClass: WebStorage} }])  

// where globalStorageService is an opaque token
export let globalStorageService = new Token("IStorageService"); 

//AppComponent   
@Component
export class AppComponent {

  constructor(@Inject(globalStorageService) _storage:IStorageService){}

}

Answer 2

您无法使用DI接口。编译会删除接口信息，因此在运行时不可用。接口仅用于静态分析。

Answer 3

将提供程序添加到组件中：

 @Component({
   providers: [IStorageService]})
    export class AppComponent {

      constructor(private _storage: IStorageService) { } 

    }

Angular2 typescript全局提供程序使用Interface解析

3 个答案: