Typescriptを使用したIonic2およびAngularJS2アプリケーションでタイプが見つかりません

Question

TypeScriptを使用してIonic2およびAngularJS2アプリケーションを作成しようとしていますが、エラーが発生しています：例外：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){} 

だけEventCardLargeのメンバーとしてcalEventを宣言：

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

Answer 2

それは私がCalEventクラスを作るために必要なことが判明「プロバイダー」を作成し、EventCardLargeメタデータに挿入します。

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