angular2 truy cập biến ngModel từ chỉ thị

Question

Tôi đang cố gắng tạo chỉ thị bộ chọn giờ như sau.
<input [(ngModel)]="date1" datetime-picker date-only />

và date1 được gán như một ngày, ví dụ, new Date()

Khi tôi hiển thị này trong html, văn bản trong yếu tố đầu vào trông giống như sau
Thu Jan 01 2015 00:00:00 GMT-0500

Tôi muốn hiển thị như thay vào đó, thay vào đó là
2015-01-01 00:00:00

Tôi muốn định dạng ngày WITHIN ad irion sử dụng DatePipe thay vì hiển thị kết quả từ hàm toString() mặc định.

Câu hỏi của tôi là; "trong chỉ thị, làm cách nào để truy cập biến ngModel?", ví dụ: date1, để tôi có thể thêm phương thức toString().

Nếu cách tiếp cận của tôi không đúng, hãy thông báo cho tôi.

Answer 1

Để truy cập ngModel, bạn chỉ cần có một số @Input() trong số datetime-picker của mình. Và vì bạn đang sử dụng liên kết dữ liệu 2 chiều, bạn phải phát ra các thay đổi bạn thực hiện cho ngModel.

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

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

Check this plunk

---

Các tốt hơn theo cách IMHO, đang sử dụng 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

Dưới đây là cách đơn giản và dễ dàng để lắng nghe và thông báo ngModel. Tôi vừa chứng minh với jQuery để dễ hiểu. Thực tế, nó có thể là bất cứ điều gì.

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