typescript - Injicera en tjänst i en komponent

FYI: använder angular2 (2.0.0-alpha.45) & TypeScript (1.6.2)

Försöker skapa en enkel tjänst att injicera i en komponent.

Felet jag får:

Kan inte lösa alla parametrar för {ComponentName}(?). Se till att de alla har giltig typ eller annotationer.

Bootstrapping :

bootstrap(App, [ROUTER_PROVIDERS, HTTP_PROVIDERS]);

Service (my-service.ts):

import {Injectable} from 'angular2/angular2';
@Injectable()
export class MyService {
  public doSomething() {}
}

Konsumerande komponent:

import {Component} from 'angular2/angular2';
import {MyService} from './my-service';
export class ListManager{
  constructor(private myService: MyService){
    console.log('myService', myService);
  }
}

Saker jag har provat

  • I tjänsten:

    • markera/avmarkera tjänsten med @Injectable

  • Vid bootstrapping:

    • Lägga till/ta bort MyService i listan över startprogramleverantörer

  • I komponent

    • ange tjänsten som en leverantör @Component({providers: [MyService]})
    • specificerar tjänsten som en bindning @Component({bindings: [MyService]})

Svar #1

Jag tror att du skulle göra:

constructor(private myService: MyService){
    console.log('myService', myService);
}

Du måste också ange tjänsten som en leverantör i @Component-definitionen

@Component({
  ...
  providers: [MyService]})

Svar #2

Försök att göra detta i din komponent:

import {Component} from 'angular2/angular2';
import {Inject} from 'angular2/core';
import {MyService} from './my-service';

export class ListManager{
  private listService: ListService;

  constructor(@Inject(ListService) listService: ListService){
      console.log('listService', listService);
  }
}

(Observera den nya importen och @Inject inuti konstruktorn)

Låt mig veta om det fungerade för dig. En plunker kommer också hjälpa till att isolera problemet.

Relaterade artiklar