angular2从指令访问ngModel变量

Question

我正在尝试构建如下所示的日期时间选择器指令.
<input [(ngModel)]="date1" datetime-picker date-only />

并被date1指定为日期,例如,new Date()

当我在html中显示它时,input元素中的文本如下所示
Thu Jan 01 2015 00:00:00 GMT-0500

我希望显示如下所示
2015-01-01 00:00:00

我想使用DatePipe格式化日期WITHIN,而不是显示默认的toString()函数的结果.

我的问题是; "在一个指令中,我如何访问ngModel变量？",例如date1,这样我就可以添加toString()方法.

如果我的方法不对,请告诉我.

Answer 1

这是一种简单易用的方式来监听和通知ngModel.我刚刚使用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);
            }
        });
    }
}

Answer 2

对于访问ngModel,你可以简单地只是有一个@Input()在你的datetime-picker.由于您使用的是双向数据绑定,因此必须发出所做的更改ngModel.

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

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

检查这个插头

恕我直言,更好的方式是使用 DatePipe

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

检查这个插头