angular2アクセスngModelディレクティブの変数

Question

次のようなdatetime pickerディレクティブを作成しようとしています。
<input [(ngModel)]="date1" datetime-picker date-only />

とdate1日として割り当てられているに、例えば、私はHTMLでこれを表示するとnew Date()

、入力要素のテキストが、私は次のように表示したい以下の
Thu Jan 01 2015 00:00:00 GMT-0500

のように見えます次の代わりに
2015-01-01 00:00:00

広告内に日付をフォーマットしたいデフォルトのtoString（）関数の結果を表示するのではなく、DatePipeを使用してディレクティブを使用します。

私の質問は、 "ディレクティブ内で、変数ngModelにアクセスするにはどうすればいいですか？"（例：date1）、toString（）メソッドを追加できます。

私のアプローチが正しくない場合は、私に助言してください。

Answer 1

ngModelにアクセスするには、に@Input()と入力するだけです。また、双方向データバインディングを使用しているので、変更をngModelに発行する必要があります。

---

より良い方法の私見

Check this plunk

@Directive({ 
    selector:'[date-time-picker]' 
}) 
export class DateTimePicker{ 
    @Input() ngModel; 
    @Output() ngModelChange = new EventEmitter(); 

    ngOnInit(){ 
    this.ngModelChange.emit(this.ngModel.toDateString()); 
    } 
} 

、耳を傾け、ngModelに通知するためにここで DatePipe

@Component({ 
    selector: 'my-app', 
    directives:[DateTimePicker], 
    template: ` 
     <input (ngModelChange)="myDate = $event" [ngModel]="myDate | date:'short'" datetime-picker /> 
    ` 
}) 
export class AppComponent { 
    myDate = new Date(); 
} 

Check this plunk

Answer 2

され、シンプルで簡単な方法を使用しています。簡単な理解のためjQueryでデモンストレーションしました。実際には、何でもかまいません。

import { Directive, ElementRef } from '@angular/core'; 
import { NgModel } from '@angular/forms'; 

@Directive({ 
    selector: `[ngModel][customDir]`, 
    providers: [NgModel] 
}) 
export class CustomDirective { 


    constructor(private element: ElementRef, private ngModel: NgModel) { 

    } 

    ngOnInit() { 
     let that = this; 
     /* Here you can write custom initialization code */ 

     /* Listening to the value of ngModel */ 
     that.ngModel.valueChanges.subscribe(function (value) { 
      /* Set any value of your custom control */ 
      $(that.element.nativeElement).data("newValue",value); 
     }); 

     /* Inform ng model for any new change happened */ 
     $(that.element.nativeElement).bind("customEvent",function (someNewValue) { 
       that.ngModel.update.emit(someNewValue); 
      } 
     }); 
    } 
}