angular2从指令访问ngModel变量
发布时间:2020-12-17 07:34:01 所属栏目:安全 来源:网络整理
导读:我正在尝试构建如下所示的日期时间选择器指令. input [(ngModel)] =“date1”datetime-picker date-only / 和date1被指定为日期,例如,新的日期() 当我在html中显示它时,input元素中的文本如下所示 2015年1月1日星期四00:00:00 GMT-0500 我希望显示如下所示 2
我正在尝试构建如下所示的日期时间选择器指令.
< input [(ngModel)] =“date1”datetime-picker date-only /> 和date1被指定为日期,例如,新的日期() 当我在html中显示它时,input元素中的文本如下所示 我希望显示如下所示 我想使用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 恕我直言,更好的方式是使用 @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 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |