角2 - 绑定组件到多个值

问题描述：

日期范围选择我已经有一个工作窗口小部件，这是我必须链接到@angular/forms子系统。

我希望能够将两个输出值（比如rangeStart和rangeEnd）绑定到包含表单状态中的两个不同属性。

有没有一种方法可以配置NgModel设置来完成这个？

另一种可能是类型日期范围的单一属性绑定：

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

我想这种处理器在一个角友好整合零件。但是，我不能简单地这样做：

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

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

你能否给我们提供一些代码或更好的解释，因为我不确定你想在这里完成什么。 –

我试图更好地描述我的情况。基本上我有两个值，我想通过NgModel公开输出，或者其他替代 –

我的回答对你的问题有帮助吗？您可以根据您的需求将它们都设置为EventEmitters yes或甚至是Subject（来自rxjs）。 –

答

那么，事实证明，你可以可以有任何形式的模型。

所以，我用的是基类从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对象时，这是最好的。一个老式的表单编码提交将不那么线性。

答

您可以使用两个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

是的，但我可以附加验证和表单绑定到简单的输出指令？我试图了解可能的方法有哪些限制。 –

如果您将它们用作EventEmitters或Subjects，则可以订阅它们并对这些事件使用验证 –

答

到组件交互的引用。如果你想创建自己的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); 
     } 
}

现在你可以使用如下并具有双向数据实际上绑定：

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

将链接添加到这个简单的教程，以及： http://www.angulartraining.com/blog/tutorial-create-your-own-two-way-data-binding-in-angular/

角2 - 绑定组件到多个值

相关推荐