0

所以在一个简单的两个组件上传递数据，这应该很容易。但在我的情况下，我使用的是第三方日期选择器插件，然后由于我的应用程序的不同形式有这么多日期字段，我决定创建我的日期选择器的一个组件，这样我就不必在每个中重复配置认为我使用它。现在的问题是我将模型传递给子组件，该子组件也被传递给 datepicker 组件，如下所示：

父组件.ts

...
template: `<my-custom-datepicker-component [model]="model"></my-custom-datepicker-component>
<span>{{ model }}</span>
`
...
export class ParentComponent{
   model: any;
}

在 my-custom-datepicker.ts

...
template: '<datetime [(ngModel)]="model"></datetime>'
...
export class MyCustomDatepickerComponent{
   @Input() model: any;
}

这是我正在使用的日期选择器插件：https ://nkalinov.github.io/ng2-datetime/ 。

我的问题是选择的日期没有反映父组件的模型。希望可以有人帮帮我。提前致谢！

4

2 回答 2

1

my-custom-date-picker.component.ts

template: '<datetime [(ngModel)]="model" 
      (ngModelChange)="dateChanged($event)"></datetime>'
...
export class MyCustomDatepickerComponent{
   @Input() date: any;
   @Output() dateChange = new EventEmitter<any>();
   // dateChanged will be called when datetime model changes
   // this will also trigger model
   dateChanged(date: any){
      this.dateChange.emit(date);
   }
}

parent.component.ts

...
template: `<my-custom-datepicker-component 
            [(date)]="programDate"></my-custom-datepicker-component>
<span>{{ programDate }}</span>
`
...
export class ParentComponent{
   programDate: any;
}

或者

...
template: `<my-custom-datepicker-component 
          (dateChange)="customComponentDateChanged($event)" [date]="programDate">
          </my-custom-datepicker-component>
<span>{{ programDate }}</span>
`
...
export class ParentComponent{
   programDate: any;
   customComponentDateChanged(date: any) {
     this.programDate = date;
   }
}

这仅说明：

  1. 使用 EventEmitter 的子与父通信。
  2. 使用 Event Emitter 进行双向绑定

但是当您说自定义日期选择器时，您实际上是在尝试创建自定义表单元素。如果是这种情况，那么它会有点复杂，因为您需要实现验证和 ngModel/ngControl/ControlValueAccessor，如此处所述

话虽这么说，如果你想添加一些新的行为，<datetime>你总是可以extend使用原始组件。扩展它将保持其功能完整（您必须提供新的模板/css，因为@Component 装饰器不会被继承）并且您可以添加自己的。

为什么要在上面创建自定义组件<datetime>？

于 2017-06-15T07:01:13.983 回答
0

试试这样

在 my-custom-datepicker.ts

@Input() 模型：任何；

您可以在组件中使用 this.model 访问模型

于 2017-06-15T05:43:35.313 回答