Angular 2 - 将组件绑定(bind)到多个值

Question

我正在尝试在 Angular 2 中实现日期范围选择器。

我已经有了一个可以工作的小部件，我必须将它链接到 @angular/forms 子系统。

我想要的是能够将两个输出值(比方说 rangeStart 和 rangeEnd)绑定(bind)到包含表单状态中的两个不同属性。

有没有一种方法可以配置 NgModel 设置来完成此操作？

另一种方法是绑定(bind) DateRange 类型的单个属性:

type DateRange = {
    from: Date,
    to: Date
};

我不知道这是否可能。

关于如何完成这个有什么建议吗？

编辑:

我拥有的是一个 jQuery 派生的 JS 组件，它公开了一个 onChange，如下所示:

component.on('change', (eventData) => {
  // here I have eventData.from and eventData.to as Date values
});

我想将这种处理程序集成到 Angular 友好的组件中。 但是，我不能简单地这样做:

<my-date-range-picker name"xyz" [(NgModel)]="aDateRangeValue"></my-date-range-picker>

因为，AFAICT，变化检测不适用于复合值。 我应该在我的组件中公开什么？两个 EventEmitter？我能否以某种方式利用 NgModel？

Answer 1

如果你想创建你自己的 ngModel 就像双向数据绑定(bind)，那是你应该做的:

@Component()
export class MyComponent {

      myValue = 0;

      @Output()
      myValueChange = new EventEmitter();

      @Input()
      get myValue() {
             return this.myValue;
      }

      set myValue(val) {
           this.myValue= val;
           this.myValueChange.emit(this.myValue);
      }
}

现在您可以按如下方式使用它并实现双向数据绑定(bind):

<my-component [(myValue)]="someExpression"></my-component>

同时添加指向简单教程的链接:http://www.angulartraining.com/blog/tutorial-create-your-own-two-way-data-binding-in-angular/