Angular2：EventEmitter有時會觸發，有時不會觸發

Question

在某些情況下會觸發組件的EventEmitter ，但在其他情況下不會觸發。 為什么？

我有一個自定義的日期選擇器。 您可以手動更改日期（ <input> ）或使用ng2-bootstrap <datepicker> datepicker <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

好吧...現在有點尷尬了。 這是此組件的用法：

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

我有一個類似的問題。 我通過將@ainput日期模型（datemodel）與datepicker（localdate：Date;）中使用的日期模型解耦來解決它，然后使用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);
    }
}

}

Answer 3

跨此頁面的任何人的另一種解決方案。

我有一個類似的問題，這也不是EventEmitter的錯。 :-)最初看來，我的EventEmitter間歇性地沒有觸發，但是罪魁禍首是負責觸發EventEmitter的單擊處理程序。

我在我的html模板中有這個：

<button mat-mini-fab color="primary">
    <i class="fas fa-pencil-alt" (click)="onClickEdit()"></i>
</button>

和點擊處理程序：

  export class MyClass {
  @Output() edit = new EventEmitter();

  constructor() { }

  onClickEdit() {
    console.log('onClickEdit(), this.edit=' + this.edit);
    this.edit.emit();
  }
}

我添加了console.log（）來調試問題，並且我發現每次單擊精美的編輯圖標時均不會觸發onClickEdit（），這說明了為什么EventEmitter沒有觸發。 :-)

我通過將（click）屬性移動到封閉按鈕來解決此問題（事后看來，這似乎很明顯。）

<button mat-mini-fab color="primary" (click)="onClickEdit()">
    <i class="fas fa-pencil-alt"></i>
</button>

問題解決了。