是否可以使用angular2注入接口？ [英] Is it possible to inject interface with angular2?

问题描述

我想知道是否有一种在Angular2中注入接口的正确方法？ （参见下文）

我认为这与界面上缺少的@Injectable（）装饰器有关，但似乎不允许这样做。

问候。

当CoursesServiceInterface作为接口实现时，TypeScript编译器会抱怨CoursesServiceInterface找不到名字：

 从'./CoursesService.interface'导入{CoursesServiceInterface};来自'./CoursesService.service'的
 import {CoursesService};来自'./CoursesServiceMock.service'的
 import {CoursesServiceMock}; 
自举（AppComponent，[
 ROUTER_PROVIDERS，
 GlobalService，
提供（CoursesServiceInterface，{useClass：CoursesServiceMock}）
]）; 
  

但使用CoursesServiceInterface作为界面：

 从'angular2 / core'导入{Injectable};来自'./Course.class'的
 import {Course}; 
 // @Injectable（）
 export interface CoursesServiceInterface {
 getAllCourses（）：Promise< Course []> ;; // {return null; }; 
 getCourse（id：number）：Promise< Course> ;; // {return null; }; 
 remove（id：number）：Promise< {}> ;; // {return null; }; 
} 
  

当服务是一个类时，TypeScript编译器不再抱怨：

 从'angular2 / core'导入{Injectable};来自'./Course.class'的
 import {Course}; 
 @Injectable（）
导出类CoursesServiceInterface {
 getAllCourses（）：Promise< Course []> {return null; }; 
 getCourse（id：number）：承诺<课程> {return null; }; 
 remove（id：number）：Promise< {}> {return null; }; 
} 
  

解决方案

不，不支持接口对于DI。由于TypeScript接口在运行时不再可用，只能静态使用，因此不能用作DI令牌。

或者你可以使用字符串作为键或 InjectionToken

  provide（'CoursesServiceInterface'，{useClass：CoursesServiceMock}）// old 
  

  providers：[{提供：'CoursesServiceInterface'，useClass：CoursesServiceMock}] 
  

并像

$ b一样注入
$ b <预类= 郎-TS prettyprint-越权> 构造（@注入（ 'CoursesServiceInterface'）私人coursesService：CoursesServiceInterface）{}


另请参阅 https：/ /angular.io/api/core/InjectionToken

i wonder if there is a proper way to inject interfaces in Angular2? (cf. below)

I think this is related with the missing @Injectable() decorator on the interface, but it seems this is not allowed.

Regards.

When CoursesServiceInterface is implemented as an interface, the TypeScript compiler complains "CoursesServiceInterface cannot find name":

import {CoursesServiceInterface} from './CoursesService.interface';
import {CoursesService} from './CoursesService.service';
import {CoursesServiceMock} from './CoursesServiceMock.service';
bootstrap(AppComponent, [
  ROUTER_PROVIDERS, 
  GlobalService,
  provide(CoursesServiceInterface, { useClass: CoursesServiceMock })
  ]);

but with CoursesServiceInterface as an interface:

import {Injectable} from 'angular2/core';
import {Course} from './Course.class';
//@Injectable()
export interface CoursesServiceInterface {
    getAllCourses(): Promise<Course[]>;//{ return null; };
    getCourse(id: number): Promise<Course>;// { return null; };
    remove(id: number): Promise<{}>;// { return null; };
}

When service is a class, the TypeScript compiler doesn't complain anymore:

import {Injectable} from 'angular2/core';
import {Course} from './Course.class';
@Injectable()
export class CoursesServiceInterface {  
    getAllCourses() : Promise<Course[]> { return null; };
    getCourse(id: number) :Promise<Course> { return null; };
    remove (id: number) : Promise<{}> { return null; };
}

解决方案

No, interfaces are not supported for DI. With TypeScript interfaces are not available at runtime anymore, only statically and therefore can't be used as DI tokens.

Alternatively you can use strings as keys or InjectionToken

provide('CoursesServiceInterface', {useClass: CoursesServiceMock}) // old

providers: [{provide: 'CoursesServiceInterface', useClass: CoursesServiceMock}]

and inject it like

constructor(@Inject('CoursesServiceInterface') private coursesService:CoursesServiceInterface) {}

See also https://angular.io/api/core/InjectionToken

这篇关于是否可以使用angular2注入接口？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！