2015-09-22 10 views
5

Sto solo testando Angularjs2.0 ma sto riscontrando problemi nell'iniettare un servizio a una classe. Ecco il mio codice:Iniezione di componenti 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); 

ottengo questo errore:

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.

sto guardando la documentazione e sembra che questo è esattamente il modo in cui stanno iniettando il loro servizio. Mi manca un passaggio? Ho anche provato a riavviare la classe di servizio, ma non ha funzionato.

risposta

5

Mark vostro servizio come iniettabili come questo:

import {Injectable} from 'angular2/core'; 

@Injectable() 
class MeetingService { ... } 

Si può leggere di più su quella HERE

Aggiornamento se il codice è tutto in 1 file come lo avete mostrato sopra, quindi sarà necessario spostare la definizione del servizio sopra il componente, poiché le classi in ES6 (ES2015) non vengono issate poiché le funzioni sono in ES5.