角度2 - 複数の値にバインディングコンポーネント

Question

私はすでに私が@angular/formsサブシステムにリンクする必要が働いてウィジェットを、持っているアンギュラ2.

で日付範囲セレクターを実装しようとしています。

私が望むのは、2つの出力値（rangeStartとrangeEndとしましょう）を、フォームの状態の2つの異なるプロパティにバインドできるようにすることです。

これを達成するためにNgModel設定を構成する方法はありますか？

代替は、型のDateRangeの単一のプロパティをバインドすることができます。これは、ことも可能である場合、私は知らない

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

buyt。

これを達成するための提案はありますか？

編集：

私は何を持っていることである、のonChangeを公開するので、のようなjQueryの由来、JSコンポーネント：

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は、変化検出は、複合値で仕事に行くされていない、ので。 コンポーネントには何を公開する必要がありますか？ 2つEventEmitter？何らかの形でNgModelを利用することはできますか？

Answer 1

よく分かりましたが、にはのモデルがあります。これは私の場合には、Tはクラスであってもfromとtoプロパティで、動作するように起こる

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

：

だから、私はここに最も関連のある、this articleから基底クラスを使用

@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オブジェクトを送信する準備をするためにのみフォームを使用する場合に最も効果的です。旧式のフォームエンコードされたサブミットは、線形性が低くなります。

Answer 2

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; 

は、ここでは、作成したい場合は、ngModelを所有InputとOutput

Component Interaction

Answer 3

を使用してコンポーネントの相互作用への参照です持っているだろうが双方向データ結合のように、あなたが何をすべきかの：

@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/