Angular2：EventEmitterが起動することがあります。

Question

コンポーネントのEventEmitterは、場合によっては起動しますが、それ以外の場合は起動しません。どうして？

私はカスタムの日付ピッカーを持っています。日付を手動で変更する（<input>）か、ng2-bootstrap <datepicker>を使用して便利に選択することができます。

私は、このテンプレートを持っている：

<input [(ngModel)]="dateString" 
    class="form-control" 
    (focus)="showPopup()" 
    (change)="inputChange()"> 
<datepicker class="popup" [ngClass]="{ 'popup-hidden': !showDatepicker }" 
    [(ngModel)]="dateModel" 
    [showWeeks]="true" 
    (ngModelChange)="hidePopup($event)"> 
</datepicker> 

関連部品と部品：

export class CustomDatepickerComponent { 
    @Input() 
    dateModel: Date; 
    dateString: string; 

    showDatepicker = false; 

    @Output() 
    dateModelChange: EventEmitter<Date> = new EventEmitter(); 

    showPopup() { 
     this.showDatepicker = true; 
    } 

    // Called when the date is changed manually 
    // It DOES fire the event 
    inputChange() { 
     let result = moment(this.dateString, 'YYYY-MM-DD'); 
     this.update(result.toDate()); 
    } 

    // Called through the DatePicker of ng-bootstrap 
    // It DOESN'T fire the event 
    // However, the showDatepicker binding takes effect (see template) 
    hidePopup(event: Date) { 
     showDatepicker = false; 
     this.update(event); 
    } 

    update(date: Date) { 
     this.dateModel = date; 
     this.dateString = moment(date).format('YYYY-MM-DD'); 
     // This SHOULD fire the event 
     // It is called in BOTH cases! 
     // But it fires only when the date is changed through the <input> 
     this.dateModelChange.emit(this.dateModel); 
    } 

私はこの日付ピッカーをこのように使用します。

<custom-datepicker [dateModel]="testDate" (change)="change($event)"></custom-datepicker> 

ここchange()ハンドラ関数です。

testDate = new Date(); 
    change($event) { console.info('CHANGE', $event); } 

Answer 1

Ok ...これはやや恥ずかしいものです。

custom-datepicker [dateModel]="testDate" (change)="change($event)"></custom-datepicker> 

に変更する必要があります： これは、このコンポーネントの利用だった

custom-datepicker [dateModel]="testDate" (dateModelChange)="change($event)"></custom-datepicker> 

興味深い部分は、<input>要素のchangedイベントがCustomDatepickerComponentからバブルアップと思われていることです。それはコンポーネントの内部で処理され、処理されなかったdateModelChangeを起動した後、外側のコンポーネントにchangeイベントとしてバブリングされ、このように処理されました。

inputChange()にイベントを渡してevent.stopPropagation()とした場合、キャンセルされ、伝播しませんでした。

もう一度：EventEmitterとは関係ありませんでした。

Answer 2

私は同様の問題がありました。私は日付ピッカー内の日付モデル（localdate：Date;）から@ainput日付モデル（datemodel）を切り離して解決しました そして、これらの変数を同期させるためにngOnChangeを使用しました。このようにして、EventEmitterは正常に動作し、各日付選択または更新の値を送信します。

export class myDatepicker implements OnChanges{ 
    localdate: Date; 

    @Input() datemodel: Date; 
    @Input() isOpen: boolean = false; 
    @Input() label: string; 
    @Input() disabled: boolean = false; 


    @Output() datemodelChange: EventEmitter<Date> = new EventEmitter<Date>(); 

    // Date has been selected in Datepicker, emit event 
    public selectedDate(value: any) { 

    this.datemodelChange.emit(value); 
} 

// React on changes in the connected input property 
ngOnChanges(changes: { [propName: string]: SimpleChange }) { 

    try { 
     if (changes["datemodel"] && changes["datemodel"].currentValue) { 
      this.localdate = moment(changes["datemodel"].currentValue).toDate();    // raw Input value 
     } 
    } catch (ex) { 
     console.log('myDatePicker: ' + ex); 
    } 
} 

}