我创建了一个组件,然后尝试在其上发送自定义属性。但是在构造函数中,我只是得到一个空值。我知道它有些问题,因为我正在打印变量。

这是我实例化倒数计时组件的html,我从其他组件调用了它:

this is how I know voteDate has something{{voteDate}}

<countdown [attr.inputDate]="voteDate"></countdown>


这是组件(在构造函数中为空):

import {Component, OnInit, ElementRef} from 'angular2/core';
import {Observable} from 'rxjs/Rx';

@Component({
    selector: 'countdown',
    template: `
  <div class="font-poll-countdown">
    Poll Will Close in: {{message}}
  </div>
`
})
export class CountDown implements OnInit {

    private future: Date;
    private futureString: string;
    private diff: Date;

    constructor(elm: ElementRef) {
        this.futureString = elm.nativeElement.getAttribute('inputDate');
    }

    dhms(t) {
        var days, hours, minutes, seconds;
        days = Math.floor(t / 86400);
        t -= days * 86400;
        hours = Math.floor(t / 3600) % 24;
        t -= hours * 3600;
        minutes = Math.floor(t / 60) % 60;
        t -= minutes * 60;
        seconds = t % 60;

        return [
            days + 'd',
            hours + 'h',
            minutes + 'm',
            seconds + 's'
        ].join(' ');
    }



    ngOnInit() {
        this.future = new Date(this.futureString);
        Observable.interval(1000).map((x) => {
            this.diff = Math.floor((this.future.getTime() - new Date().getTime()) / 1000);
        }).subscribe((x) => {
            this.message = this.dhms(this.diff);
        });
    }
}


我尝试了所有操作,但控制器中仍然没有显示null。

最佳答案

您可以使用InputMetadata,您可以在其中通过属性传递数据。 Angular在更改检测期间自动更新数据绑定属性,并将其传递给countdown组件。

inputDate包装[](以将其作为属性传递),然后才能访问该值,您需要在组件内部将其定义为@Input

<countdown [inputDate]="voteDate"></countdown>

//inside your component
@Input() inputDate: Date;

10-06 04:38
查看更多