typescript - Injicera komponenter Angularjs2
Jag testar bara Angularjs2.0 men jag stöter på problem med att injicera en tjänst till en klass. Här är min kod:
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);
Jag får det här felet:
UNDANTAG: Fel vid instansiering av Token(Promise<ComponentRef>)!. ORIGINELLT UNDANTAG: Kan inte lösa alla parametrar för MeetingFormComponent(undefined). Se till att de alla har giltig typ eller annotationer.
Jag tittar på dokumentationen och det verkar som att det är precis så de injicerar sin tjänst. Saknar jag ett steg? Jag har också försökt att bootstrapa tjänsteklassen men det fungerade inte.
Svar #1
Markera din tjänst som injicerbar så här:
import {Injectable} from 'angular2/core';
@Injectable()
class MeetingService { ... }
Du kan läsa mer om det HÄR
Uppdatering om din kod är allt i en fil som du har visat ovan, då behöver du flytta definitionen av din tjänst ovanför komponenten, eftersom klasser i ES6 (ES2015) inte lyfts upp på samma sätt som funktioner gör i ES5.
