make ngOnChange запускается, когда BehaviorSubject испускает истинное значение дважды

Question

Я работаю над приложением Angular 5.У меня есть выпадающий компонент (, который содержит следующий код в файле HTML, dropdown.component.html

<p-dropdown [options]="data" [(ngModel)]="selectedFilterValue" placeholder="Please Select" [style]="{width: '100%'}" (onChange)="selectedValueChanged($event)"></p-dropdown>

dropdown.component.tc

export class DropdownComponent implements OnInit, OnChanges {

  constructor() { }

  @Input() ddOptions: string[] = [];
  @Input() filterName: string;
  @Input() clearDropDown: boolean = false;

Я использую этот раскрывающийся компонент в своей родительской базе, где я отображаю 3 раскрывающихся списка, код выглядит следующим образом: parent.component.html

<div class="container">
  <div class="row">
      <div class="col-4">
      <div class="d-flex flex-row align-items-center">
        <span class="col-xs-auto">PBG:</span>
        <arcm-dropdown class="col" [ddOptions]="pbgFilterValues" [clearDropDown]="clearDropdownObservable | async" (filterValue)="selectedValueChanged($event,FilterName.PBG)"></arcm-dropdown>
      </div>
    </div>
    <div class="col-4">
      <div class="d-flex flex-row align-items-center">
        <span class="col-xs-auto">Wafer Size:</span>
        <arcm-dropdown class="col" [ddOptions]="waferSizeFilterValues" [clearDropDown]="clearDropdownObservable | async" (filterValue)="selectedValueChanged($event,FilterName.WaferSize)"></arcm-dropdown>
      </div>
    </div>

parent.component.ts

clearFilters(e:any):void{
     this.clearDropdownSubject.next(true);
  }

Теперь яна родительской странице есть кнопка с именем «очистить фильтр», и при нажатии этой кнопки я получаю значение из моего объекта BehaviorSubject как истинное. Это значение подсчитывается дочерним выпадающим компонентом. Проблема: В первый раз, когда я передаю значение как «true», дочерний компонент (выпадающий компонент) запускается ngOnChanges, но когда я снова передаю то же значение, ngOnchang не запускается, и я знаю почему. Что мне делать в этой ситуации.

Я думал о том, чтобы испускать случайный номер вместо логического, но не рандаНомер om иногда может быть одним и тем же, и моя кнопка «Очистить фильтр» не будет работать.

Answer 1

Я недавно столкнулся с той же проблемой.Итак, вместо того, чтобы помещать примитивный логический поток в поток BehaviorSubject, я использовал объект.Например, в своем коде определите интерфейс, подобный следующему:

export interface Clear {
  clear: Boolean;
}

Затем измените родительский компонент следующим образом:

clearDropdownSubject$: BehaviorSubject<Clear> = new BehaviorSubject({clear: false});
.
.
.
clearFilters(e:any):void{
    this.clearDropdownSubject.next({clear: true});
}

Наконец, в свой DropdownComponent:

@Input() clearDropDown: Clear = {clear: false};

И соответственно обновите ваш код.

Answer 2

Вот так, я решил это пока, пока не получу лучший способ,

clearFilters(e: any): void {

    let num: number = this.getRandomNumber();
    if (num > 0 && num != this.clearDropdownSubject.getValue()) {
      this.clearDropdownSubject.next(num);
      this.filterInputList = [];
    }
    else {
      this.clearFilters(0);
    }
  }


  getRandomNumber(): number {
    let randomNumber: number = 0;
    return Math.floor(Math.random() * (100 - 1 + 1)) + 1;
  }