入れ子になったコンポーネントの角度2のパス値

Question

データを渡す単純な2つのコンポーネントでは、これは簡単です。しかし、私の場合、私はthirdy-partyのdatepickerプラグインを使用しています。私のアプリケーションのさまざまなフォームに日付フィールドがたくさんあるので、私はdatePickerのコンポーネントを作成して、それぞれの設定を繰り返す必要はありません私はそれを使用することを確認します。

親-component.ts

... 
template: `<my-custom-datepicker-component [model]="model"></my-custom-datepicker-component> 
<span>{{ model }}</span> 
` 
... 
export class ParentComponent{ 
    model: any; 
} 

と私のカスタム-datepicker.ts中：問題は今、私はまた、このような日付ピッカーコンポーネントに渡されている子コンポーネントにモデルを渡す午前ですhttps://nkalinov.github.io/ng2-datetime/を：

... 
template: '<datetime [(ngModel)]="model"></datetime>' 
... 
export class MyCustomDatepickerComponent{ 
    @Input() model: any; 
} 

そして、ここでは、私が使用しているDatePickerのプラグインです。

私の問題は、選択した日付が親コンポーネントのモデルに反映されないということです。誰かが私を助けることを願っています。前もって感謝します！

Answer 1

は、あなたが私の-カスタムdatepicker.tsで @Inputプロパティにモデルをバインドしていますか？

@Input() model: string; 

Answer 2

私のカスタム-datepicker.tsでこの

よう試してみて

@Input（）モデル：任意の;

あなたは

Answer 3

私-カスタム日付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

コンポーネントにthis.model使用してモデルにアクセスすることができます

... 
template: `<my-custom-datepicker-component 
      [(date)]="programDate"></my-custom-datepicker-component> 
<span>{{ programDate }}</span> 
` 
... 
export class ParentComponent{ 
    programDate: any; 
} 

---

1. Child to parent communication with EventEmitter.
2. Two-way binding with Event Emitter

しかし、あなたはカスタム日付ピッカー言うとき、あなたは実際にカスタムフォーム要素を作成しようとしている：OR

... 
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。それを拡張する無傷でその機能を維持します（@Componentデコレータdoesntの取得が継承されたとして、あなたが新しいテンプレート/ CSSを提供する必要があります）、あなたはあなた自身を追加することができます。

は、なぜあなたは<datetime>の上にカスタム・コンポーネントを作成していますか？