0

我有一个通用组件 [date-range-selector],在此组件中,当日期值更改时,它会发出新值

@Output() changeEvent = new EventEmitter();
//unimportant code
this.changeEvent.emit({ from: moment(from), to: moment(to) });

现在在我的应用程序上,我有一个 [Clear Filters] 按钮,它将日期范围重置为默认值,但这会导致组件再次触发 changeEvent.emit 代码

如何禁用发射器,更改值然后重新启用发射器,或者我是否以错误的方式解决这个问题?

我可以从父级中删除我的侦听器,然后动态重新附加它吗?

这是我的过滤器栏中的组件

<so-date-selector class="date-selector"
  #CreationDate
  [from]="fromDate"
  [to]="toDate"
  [allowCalendar]="false"
  [allowRange]="true"
  placeholderText="Creation Date"
  (changeEvent)="creationDateChange($event)"
>
<button mat-stroked-button (click)="resetFilters()" class="clear-filter">Clear Filters</button>

在so-date-selector里面我有这个

<section *ngIf="allowRange">
  <ngx-mat-drp (selectedDateRangeChanged)="updateRange($event)" [options]="options" #dateRangePicker></ngx-mat-drp>
</section>

updateRange 调用 emit 函数,然后在我的父组件中

 resetFilters() {
    this._service.filtersInitialised = false;
    this.sourceFilter.setValue("All Sources");
    this.fromDate = moment(new Date()).subtract(14, 'days').startOf('day');
    this.toDate = moment(new Date()).clone().endOf('day');
    this._service.filtersInitialised = true;
  }

然后在服务中

loadIssues() {
    if (this.filtersInitialised) {
//do stuff
}

因此,当我检查 this._service.filtersInitialised 时,我的其他过滤器都没有触发该事件,但是日期选择器被触发,我的猜测是因为它在我重置布尔值后发出

希望这让它更清楚一点

  updateRange(range: Range) {
      this._emit(moment(range.fromDate), moment(range.toDate));
  }

  private _emit(from: moment.Moment, to: moment.Moment) {
    if (this._isInitialised) {
      this.changeEvent.emit({ from: moment(from), to: moment(to) });
    }
  }

所以我之前在上面是this._isInitialised && this.emitEnabled

emitEnabled 是一个布尔值 Input()

然后在我的消费者中,我在重置日期值时设置了 emitEnabled = false ,然后再次启用它,但仍然触发了发射,所以我的想法是子控件在父控件后面运行,所以当它到达布尔值的发出函数时恢复了真实

【最后更新】我觉得答案很简单,这个做不到,因为没有意义。这是我关于为什么的基本工作流程思考

好吧,假设我们有 3 个组件 Parent - Child - Alarm

父母正在听正在听警报的孩子

如果我将父母设置为不听孩子的话,然后在闹钟上启动一个计时器,然后再次开始听孩子的话。当闹钟响起时,孩子会通知父母,因为它又在听了。即使当父母被设置为不听时导致该动作发生的原因

所以我现实生活场景中的问题是,由于某种原因很慢,并且在我再次开始收听后通知我。

4

0 回答 0