注入组件Angularjs2

Question

我只是在测试 Angularjs2.0，但我运行遇到向 class 注入服务的问题。这是我的代码：

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);

我收到此错误：

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.

我正在查看文档，似乎这正是他们注入服务的方式。我错过了一步吗？我也尝试过引导服务 class 但那没有用。

Answer 1

像这样将您的服务标记为可注入：

import {Injectable} from 'angular2/core';

@Injectable()
class MeetingService { ... }

您可以阅读更多相关内容 HERE

Update 如果您的代码如上所示全部在 1 个文件中，那么您需要将服务的定义移动到组件上方，因为类在 ES6 (ES2015) 中没有像 ES5 中的函数那样被提升。

注入组件Angularjs2

Injecting components Angularjs2

typescript

angular