角2コンポーネントのカスタム属性がコンストラクタでnullです

Question

コンポーネントを作成していますが、カスタム属性を送信しようとしています。しかし、コンストラクタでは、私はnullを取得します。私は変数を印刷しているので、何かがあることを知っています。

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

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

、これは成分（iコンストラクタにヌルを得る）である：

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

この

は私が他のコンポーネントから呼び出すことを、私はカウントダウンコンポーネントをインスタンス化するHTMLであります

私はすべてを試していますが、まだコントローラではnullになっています。

Answer 1

InputMetadataを使用して、プロパティでデータを渡すことができます。 Angularは、変更検出中にデータバインドされたプロパティを自動的に更新し、countdownコンポーネントに渡します。 []と

ラップinputDateは、あなたが使用することはできません@Input

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

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

Answer 2

カスタム属性としてコンポーネントの内部でそれを定義する必要があり、その値へのアクセスを得るために、その後&を（プロパティとしてそれを渡します）コンストラクタあなたはngOnInit()ライフサイクルフックが呼び出されるまで待機する必要があります言っ

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

は、私がパンカジの答え@好き - 代わりにバインディングプロパティを使用します。そうすれば、実際のJavaScript Dateオブジェクトとして日付を渡すことができます。属性では、常に文字列値を取得します。