无法绑定到＆＃39; timeInSeconds＆＃39;因为它不是一个已知的原生财产

Question

我正在尝试创建一个倒计时组件。

我在运行时获得的错误

 EXCEPTION: Error: Uncaught (in promise): Template parse errors:
Can't bind to 'timeInSeconds' since it isn't a known native property ("
        </button>
    </ion-list>
    <timer [ERROR ->][timeInSeconds]="10"></timer>
</ion-content>

这是我使用的代码

timer.js

import {Component, Input} from '@angular/core';
import {CountdownTimer} from './countdownTimer';

@Component({
    selector: 'timer',
    templateUrl: 'build/components/timer/timer.html'
})
export class Timer {

    @Input() timeInSeconds: number = 0;
    private timer: CountdownTimer;

    ngOnInit() {
        this.initTimer();
    }

    initTimer() {
        this.timer = <CountdownTimer>{
            seconds: this.timeInSeconds,
            runTimer: false,
            hasStarted: false,
            hasFinished: false,
            secondsRemaining: this.timeInSeconds
        };

        this.timer.displayTime = this.getSecondsAsDigitalClock(this.timer.secondsRemaining);
        this.startTimer();
    }

    startTimer() {
        this.timer.hasStarted = true;
        this.timer.runTimer = true;
        this.timerTick();
    }

    timerTick() {
        setTimeout(() => {
            if (!this.timer.runTimer) { return; }
            this.timer.secondsRemaining--;
            this.timer.displayTime = this.getSecondsAsDigitalClock(this.timer.secondsRemaining);
            if (this.timer.secondsRemaining > 0) {
                this.timerTick();
            } else {
                this.timer.hasFinished = true;
            }
        }, 1000);
    }

    getSecondsAsDigitalClock(inputSeconds: number) {
        var sec_num = parseInt(inputSeconds.toString(), 10); // don't forget the second param
        var hours = Math.floor(sec_num / 3600);
        var minutes = Math.floor((sec_num - (hours * 3600)) / 60);
        var seconds = sec_num - (hours * 3600) - (minutes * 60);
        var hoursString = '';
        var minutesString = '';
        var secondsString = '';
        hoursString = (hours < 10) ? '0' + hours : hours.toString();
        minutesString = (minutes < 10) ? '0' + minutes : minutes.toString();
        secondsString = (seconds < 10) ? '0' + seconds : seconds.toString();
        return hoursString + ':' + minutesString + ':' + secondsString;
    }
}

timer.html

{{timer.displayTime}}

countdownTimer.ts

export interface CountdownTimer {
    seconds: number;
    secondsRemaining: number;
    runTimer: boolean;
    hasStarted: boolean;
    hasFinished: boolean;
    displayTime: string;
}

现在在页面上使用此组件

page.ts

import {Component, ViewChild, ElementRef} from '@angular/core';
import {Timer} from '../../components/timer/timer';

@Component({
    templateUrl: 'build/pages/page/page.html',
    directives: [Timer]
})

export class PagePage {
    constructor(private navCtrl: NavController) {}
}

page.html中

<timer [timeInSeconds]="10"></timer>

我在这里做错了吗？请帮忙!!

提前致谢