Question

我创建了一个组件，并尝试在其上发送自定义属性。但是在构造函数中我得到一个null。我知道它有一些东西，因为我打印变量。

这是我实例化倒计时组件的html，我从其他组件调用：

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

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

这是组件（我在构造函数中得到null）：

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);
        });
    }
}

我尝试了所有内容，但我仍然在控制器中显示为空。

Answer 1

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

用inputDate包裹[]（将其作为财产传递）＆amp;然后，要访问该值，您需要在组件内将其定义为@Input

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

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

Answer 2

您的自定义属性在构造函数中不可用。您需要等到调用ngOnInit()生命周期钩子：

ngOnInit() {
   console.log(this.elm.nativeElement.getAttribute('inputDate'))
}

那就是说，我喜欢@ Pankaj的答案 - 改为使用属性绑定。然后，如果您愿意，可以将日期作为实际的JavaScript Date对象传递。使用属性，您始终可以获得字符串值。

构造函数

2 个答案: