角度2:事件发射器有时会触发，有时不会

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

好的...现在这有点尴尬。这是此组件的用法：

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日期模型（日期模型）与日期选择器中使用的日期模型（本地日期：日期;）分离来解决它然后我使用 ngOnChange 来保持这两个变量的同步。这样，事件发射器工作正常，并为每个日期选择或更新发送一个值。

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

对于偶然发现此页面的人来说，这是另一种解决方案。

我有一个类似的问题，也不是事件发射器的错。 :-)最初，我的事件发射器似乎间歇性地没有触发，但罪魁祸首原来是负责触发事件发射器的点击处理程序。

我的 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没有触发。

我通过将（单击）属性移动到封闭按钮来解决此问题（事后看来，这似乎很明显。

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

问题解决了。