Website-Suche

typescript - Komponenten in Angularjs2 injizieren

Ich teste gerade Angularjs2.0, aber ich habe Probleme beim Injizieren eines Dienstes in eine Klasse. Hier ist mein Code:

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 bekomme diesen Fehler:

EXCEPTION: Fehler bei der Instanziierung von Token(Promise<ComponentRef>)!. URSPRÜNGLICHE AUSNAHME: Kann nicht alle Parameter für MeetingFormComponent(undefined) auflösen. Stellen Sie sicher, dass sie alle einen gültigen Typ oder Anmerkungen haben.

Ich schaue mir die Dokumentation an und es scheint, dass genau so ihr Dienst injiziert wird. Fehlt mir ein Schritt? Ich habe auch versucht, die Serviceklasse zu bootstrapen, aber das hat nicht funktioniert.

Antwort #1

Kennzeichnen Sie Ihren Dienst wie folgt als injizierbar:

import {Injectable} from 'angular2/core';

@Injectable()
class MeetingService { ... }

Sie können mehr darüber HIER lesen

Update Wenn Ihr Code, wie oben gezeigt, komplett in einer Datei ist, müssen Sie die Definition Ihres Dienstes über die Komponente verschieben, da Klassen in ES6 (ES2015) nicht so wie Funktionen in ES5 hochgezogen werden.

Verwandte Artikel