typescript – 注入组件Angularjs2

发布时间：2020-12-17 17:39:01 所属栏目：安全来源：网络整理

导读：我只是测试 Angularjs2.0但是我遇到了向一个类注入服务的问题.这是我的代码： import {Component,View,bootstrap,NgFor,HttpService,Promise} from 'angular2/angular2';@Component({ selector: 'meeting-form',appInjector: [MeetingService]})@View({ temp

我只是测试 Angularjs2.0但是我遇到了向一个类注入服务的问题.这是我的代码：

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,time: string){
        return this.http.post('/meetings',{"room": room,"date": date,"time": time}).then(function(data){
           return data.meeting;
        })
    }
}

bootstrap(MeetingFormComponent);

我收到此错误：

EXCEPTION：令牌实例化期间出错(Promise< ComponentRef>)!.
原始例外：无法解析MeetingFormComponent的所有参数(未定义).确保它们都具有有效的类型或注释.

我正在查看文档,看起来这正是他们注入服务的方式.我错过了一步吗？我也试过引导服务类,但是没有用.

解决方法

将您的服务标记为可注射,如下所示：

import {Injectable} from 'angular2/core';

@Injectable()
class MeetingService { ... }

您可以阅读有关该HERE的更多信息

如果您的代码全部在1文件中,如上所示,则更新,然后您需要将服务定义移到组件上方,因为ES6(ES2015)中的类不会因为ES5中的函数而被提升.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!