2015-09-22 13 views
5

Właśnie testuję Angularjs2.0, ale mam problem z wstrzyknięciem usługi do klasy. Tu jest mój kodu:Wstrzykiwanie składników Angularjs2

import {Component, View, bootstrap, NgFor, HttpService, Promise} from 'angular2/angular2'; 

@Component({ 
    selector: 'meeting-form', 
    appInjector: [MeetingService] 
}) 

@View({ 
    template: ` 
     <ul> 
      <li *ng-for="#meeting of meetings"> 
       Meeting Room: meeting room {{meeting.room}} 
       Date: {{meeting.date}} 
       Time: {{meeting.time}} 
      </li> 
     </ul> 
      <select #room> 
       <option value="1">Meeting Room 1</option> 
       <option value="2">Meeting Room 2</option> 
      </select> 
      <input type="date" #date> 
      <input type="time" #time> 
      <button (click)="reserveMeeting(room.value, date.value, time.value)">Reserve</button> 

    `, 
    directives: [NgFor] 
}) 

class MeetingFormComponent{ 
    meetings: Array; 

    constructor(meetingService: MeetingService){ 
     this.meetings = meetingService.getMeetings(); 
    } 

    reserveMeeting(room: number, date: string, time: string, meetingService: MeetingService){ 
     meetingService.postMeeting(room, date, time); 
    } 
} 

class MeetingService { 
    http: HttpService; 

    constructor(http: HttpService) { 
     this.http = http; 
    } 
    getMeetings() { 
     return this.http.get('/meetings').then(function(data){ 
      return data.meetings; 
     }) 
    } 

    postMeeting(room: number, date: string, time: string){ 
     return this.http.post('/meetings', {"room": room, "date": date, "time": time}).then(function(data){ 
      return data.meeting; 
     }) 
    } 
} 

bootstrap(MeetingFormComponent); 

otrzymuję ten błąd:

EXCEPTION: Error during instantiation of Token(Promise<ComponentRef>)!. ORIGINAL EXCEPTION: Cannot resolve all parameters for MeetingFormComponent(undefined). Make sure they all have valid type or annotations.

Czekam na docs i wydaje się, że jest dokładnie tak, jak są one wstrzykiwanie ich usług. Czy brakuje mi kroku? Próbowałem również bootstraping klasy usług, ale to nie zadziałało.

Odpowiedz

5

Mark usługa jak iniekcji jak ten:

import {Injectable} from 'angular2/core'; 

@Injectable() 
class MeetingService { ... } 

można przeczytać więcej o tej HERE

Aktualizacji jeśli kod jest wszystko w 1 pliku jak już wykazano powyżej, wtedy będziesz musiał przesunąć definicję swojej usługi nad komponent, ponieważ klasy w ES6 (ES2015) nie są podnoszone, ponieważ funkcje są w ES5.