Angular2 update指令入力

Question

私はこのようにDatePickerのmaxDateを設定するAngular2指令を持っています。

@Directive({ 
    selector: '[maxDate]' 
}) 

export class MaxDateDirective { 
    private domElement: any; 
    @Input() set maxDate(max: any) { 
     if (max) { 
      $(this.domElement).data("DateTimePicker").maxDate(max); 
     } 
    } 

    constructor(private element: ElementRef, private renderer: Renderer) { 
     this.domElement = element.nativeElement; 
    } 
} 

私のコンポーネントでは、dateFromとdateToはこのようになっています。

    <div class="col-md-3"> 
         <div class="form-group"> 
          <label class="label-control">{{'START_DATE' | translate}}</label> 
          <input id="owner_start_date" name="owner_start_date" type="text" class="form-control datepicker" [(ngModel)]="filters.lastWeek" 
           [maxDate]="filters.today" /> 
         </div> 
        </div> 
        <div class="col-md-3"> 
         <div class="form-group"> 
          <label class="label-control">{{'END_DATE' | translate}}</label> 
          <input id="owner_end_date" name="owner_end_date" type="text" class="form-control datepicker" [(ngModel)]="filters.today" 
          /> 
         </div> 
        </div> 

だから、私のfromDateからピッカーはtoDateまでピッカーの[(ngModel)]="filters.today"にバインドされ、この[maxDate]="filters.today"を、持っていますが、私の@Input() set maxDate(max: any)は一度だけトリガされます。どのようにして、ディレクティブ内のコンポーネント内のモデルの更新を確認できますか？コンポーネントにコードを追加したくない場合、ディレクティブはAngular1の$watchのようなロジックを担当する必要があります。

Answer 1

はあなたが@Input() set maxDate(max: any)への変更のために、「見て」と、このような新しい最大日付値でmaxDate()を実行するよう、必要に応じてそれらに反応できるようになるMaxDateDirective内の角度ライフサイクルフックOnChangesを利用することができます。あなたはこのようOnChangesにフックします：

@Directive({ 
    selector: '[maxDate]' 
}) 

export class MaxDateDirective implements OnChanges { 
    private domElement: any; 

    @Input() set maxDate(max: any) { 
     if (max) { 
      $(this.domElement).data("DateTimePicker").maxDate(max); 
     } 
    } 

    constructor(private element: ElementRef, private renderer: Renderer) { 
     this.domElement = element.nativeElement; 
    } 

    ngOnChanges(changes: SimpleChanges) { 
     $(this.domElement).data("DateTimePicker").maxDate(changes.maxDate.currentValue); 
    } 
} 

ngOnChanges()に渡されたオブジェクトが、このような以前の値として利用することができる追加の値を提供します。

Plunkerは簡単なレベルでどのように見えるかを示しています。

うまくいけば助けてください！