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

【问题标题】：Ionic2 and AngularJS2 application using Typescript doesn't find type使用 Typescript 的 Ionic2 和 AngularJS2 应用程序找不到类型
【发布时间】：2016-09-15 01:44:54
【问题描述】：

我正在尝试使用 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>
...

感谢您的帮助。

【问题讨论】：

标签： angularjs typescript ionic-framework ionic2

【解决方案1】：

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

constructor(public calEvent: CalEvent){}

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

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

【讨论】：

【解决方案2】：

事实证明，我需要将 CalEvent 类设为“提供者”，并将其注入 EventCardLarge 元数据中。

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

【讨论】：