78 votes

Est-il possible d'injecter une interface avec angular2 ?

Je me demande s'il existe un moyen approprié d'injecter des interfaces dans Angular2 ? (cf. ci-dessous)

Je pense que cela est lié à l'absence du décorateur @Injectable() sur l'interface, mais il semble que cela ne soit pas autorisé.

Regards.

Lorsque CoursesServiceInterface est implémenté en tant qu'interface, le compilateur TypeScript se plaint de "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 })
  ]);

mais avec CoursesServiceInterface comme 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; };
}

Lorsque le service est une classe, le compilateur TypeScript ne se plaint plus :

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; };
}

0voto

mmied Points 55

Je vais laisser quelques cents ici car je suis tombé sur un problème similaire moi-même (v10 cependant). Au lieu de fournir une classe abstraite au service en tant que dépendance, j'ai utilisé une interface. J'ai réussi à le résoudre en injectant le service dépendant avec @Inject()

class DependencyService implements IDependency {}

class SomeDataService {
  constructor(@Inject('IDependency') private readonly service: IDependency) {}
}

et dans le composant qui s'est appuyé sur ce service

@Component({
  providers: [
    SomeDataService,
    {
      provide: 'IDependency',
      useClass: DependencyService,
    }
  ]
})
export class ListComponent {
  constructor(private readonly someDataService: SomeDataService) {}
}

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X