2015-09-22 9 views
5

Ich teste gerade Angularjs2.0 aus, aber ich stehe kurz davor, einen Service in eine Klasse zu injizieren. Hier ist mein Code:Injecting components 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); 

ich diesen Fehler:

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.

Ich bin bei der Dokumentation suchen und es scheint so, dass genau, wie sie ihren Dienst injizieren. Vermisse ich einen Schritt? Ich habe auch versucht, die Service-Klasse bootstraping, aber das hat nicht funktioniert.

Antwort

5

Mark Ihren Dienst als injizierbare wie folgt aus:

import {Injectable} from 'angular2/core'; 

@Injectable() 
class MeetingService { ... } 

Sie können mehr über das HERE

aktualisieren lesen wenn Ihr Code alle in 1 Datei ist, wie Sie es oben gezeigt haben, dann müssen Sie die Definition Ihres Service über die Komponente verschieben, da die Klassen in ES6 (ES2015) nicht gehisst werden, da die Funktionen in ES5 sind.