Angular 2在嵌套组件上传递值答案

【问题标题】：Angular 2 Pass values on nested componentsAngular 2在嵌套组件上传递值
【发布时间】：2017-11-17 11:06:22
【问题描述】：

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

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

【问题讨论】：

您是否阅读了解释不同可能性的指南？ Component Interaction Guide
是的，我已经这样做了。我认为这种情况比那里的示例更复杂，因为这里有 3 级嵌套组件，从我的父组件到自定义 datepicker 组件再到实际的 datepicker 插件组件。
添加三个组件的组件代码，我们可以查看一下。这个想法是使用EventEmitter 将值从孩子传递给父母。您也可以使用香蕉大括号[(x)]，但必须在您的自定义组件中为x 实现xChanges 事件。添加 parent.component.ts 、 my-custom-datepicker.component.ts 代码和指向您正在使用的 datetime 组件的链接。
我已经添加了它。基本上我只想显示自定义日期选择器中选择的日期。
顺便说一句，xChanges 是什么意思？

标签： angular ng2-datepicker

【解决方案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;
   }
}

这只是说明：

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

所述

话虽如此，如果您想为<datetime> 添加一些新行为，您可以随时使用extend original component。扩展它会保持其功能不变（您必须提供新的模板/css，因为@Component 装饰器不会被继承）并且您可以添加自己的。

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

【讨论】：

【解决方案2】：

这样试试

在 my-custom-datepicker.ts 中

@Input() 模型：任意；

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

【讨论】：

是的，我确实说过，请考虑所有基本的都在那里。