angular2从指令访问ngModel变量

前端之家收集整理的这篇文章主要介绍了angular2从指令访问ngModel变量前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在尝试构建如下所示的日期时间选择器指令.
< input [(ngModel)] =“date1”datetime-picker date-only />

和date1被指定为日期,例如,新的日期()

当我在html中显示它时,input元素中的文本如下所示
2015年1月1日星期四00:00:00 GMT-0500

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

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

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

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

要访问ngModel,您只需在datetime-picker中添加@Input().由于您使用的是双向数据绑定,因此必须发出对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

恕我直言,更好的方式是使用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

原文链接:https://www.f2er.com/angularjs/142400.html

猜你在找的Angularjs相关文章