我创建了一个组件,然后尝试在其上发送自定义属性。但是在构造函数中,我只是得到一个空值。我知道它有些问题,因为我正在打印变量。
这是我实例化倒数计时组件的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;