Question

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

父 - component.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/的日期选择器插件。

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

Answer 1

我的定制的最新-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;
}

OR

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

这只能解释：

Child to parent communication with EventEmitter.
Two-way binding with Event Emitter

但是当您说自定义日期选择器时，您实际上是在尝试创建自定义表单元素。如果是这种情况，则需要实现验证和ngModel / ngControl / ControlValueAccessor，因为它需要解释here

话虽如此，如果您想向<datetime>添加一些新行为，您始终可以extend original component。扩展它将保持其功能完整（你必须提供新的模板/ css，因为@Component装饰器不会继承），你可以添加自己的。

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

Answer 2

试试这样的

在my-custom-datepicker.ts

中

@Input（）model：any;

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

Answer 3

您是否将模型绑定到 my-custom-datepicker.ts 中的 @Input 属性？

@Input() model: string;

嵌套组件上的Angular 2 Pass值

3 个答案: