Question

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

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

我想要的是能够将两个输出值（让我们说rangeStart和rangeEnd）绑定到包含形式状态中的两个不同属性。

有没有办法配置NgModel设置来实现这个目标？

另一种方法是绑定DateRange类型的单个属性：

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

buyt我不知道这是否可能。

有关如何实现这一目标的任何建议吗？

修改

我所拥有的是一个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 s？我能以某种方式利用NgModel吗？

Answer 1

如果你想创建自己的NSRunningApplication，就像双向数据绑定一样，那就是你应该做的：

ngModel

现在您可以按照以下方式使用它并实现双向数据绑定：

@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);
      }
}

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

Answer 2

您可以使用两个Output指令。

<my-date-range-picker name"xyz" [dateTo]="dateTo" [dateFrom]="dateFrom"></my-date-range-picker>

在你的组件中你会有

import { Output } from '@angular/core';
.
.
@Output() dateTo: any; // EventEmitter, Subject, Number, String, doesn't matter ...
@Output() dateFrom: any;

以下是使用Input和Output

对组件互动的引用

Component Interaction

Answer 3

嗯，事实证明，你可以拥有任何类型的模型。

所以，我使用了this article中的基类，这是最相关的：

export class ValueAccessorBase<T> implements ControlValueAccessor {  
  private innerValue: T;


  private changed = new Array<(value: T) => void>();
  private touched = new Array<() => void>();


  get value(): T {
    return this.innerValue;
  }


  set value(value: T) {
    if (this.innerValue !== value) {
      this.innerValue = value;
      this.changed.forEach(f => f(value));
    }
  }


  touch() {
    this.touched.forEach(f => f());
  }


  writeValue(value: T) {
    this.innerValue = value;
  }


  registerOnChange(fn: (value: T) => void) {
    this.changed.push(fn);
  }


  registerOnTouched(fn: () => void) {
    this.touched.push(fn);
  }
}

即使T是一个类，在我的情况下具有from和to属性，这种情况也会起作用：

@Component(
  ...
)
class DateRangeComponent extends ValueAccessorBase<DateRange> {
  ... implementation

  // somewhere after the view init:
  jqueryComponent.on('change', (eventData) => {
   // here I have eventData.from and eventData.to as Date values
   this.value = {
     from: eventData.from,
     to: eventData.to
   };
  });
}

所以，如果其他人偶然发现了这个问题，答案是：继续编写自己的组件。

作为旁注，当仅使用表单准备在Ajax调用中发送Json对象时，这最有效。旧式的表单编码提交将不那么线性。

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

3 个答案: