Question

我正在尝试使用TypeScript构建Ionic2和AngularJS2应用程序，我收到错误： EXCEPTION：没有CalEvent提供程序！

// File event.ts
export class CalEvent {
    name: string;
    date: Date;
    description: string;
    isComplete: boolean;

    constructor(n: string, d: Date){
        this.name = n;
        this.date= d;
    }

    toString(){
        return this.name + ' at ' + this.date;
    }
}


/*****************************/
// File event_card_large.ts

import {Component} from 'angular2/core'
import {CalEvent} from '../classes/event.ts';

@Component({
    selector: 'event-card-large',
    template: '<div style="color: red;">here</div>'
})
export class EventCardLarge{

    constructor(public calEvent: CalEvent){}

}

/*****************************/
// File my_page.ts

import {Page} from 'ionic-angular';
import {CalEvent} from '../../classes/event.ts';
import {EventCardLarge} from '../../components/event_card_large.ts';

@Page({
    templateUrl: 'build/pages/my_page/my_page.html',
    directives:[EventCardLarge]
})
export class MyPage {
    public pageName: string;
    public testItems: CalEvent[];

    selectedItem = 0;

    constructor() {
        // Test code
        this.pageName = 'Test Page 2016-05-17';
        this.testItems = [];
        let d1 =  new Date('2016-05-17');
        let ce = new CalEvent('The name', d1);
        ce.isComplete = true;
        this.testItems.push();
    }

}

/*****************************/
// File my_page.html
...
<ion-item *ngFor="#v of testItems; #i = index" >

    <event-card-large [calEvent]="v">Loading...</event-card-large>

</ion-item>
...

感谢您的帮助。

Answer 1

问题是你试图在EventCardLarge中注入CalEvent：

constructor(public calEvent: CalEvent){}

只需将calEvent声明为EventCardLarge的成员：

export class EventCardLarge{
    calEvent: CalEvent;
    constructor(){}    
}

Answer 2

事实证明，我需要将CalEvent类设为＆＃34;提供商＆＃34;，并将其注入EventCardLarge元数据。

@Component({
    selector: 'event-card-large',
    template: '<div style="color: red;">here</div>',
    providers: [CalEvent]
})

使用Typescript的Ionic2和AngularJS2应用程序找不到类型

2 个答案: