时间戳

首页 > 解决方案 > 当 BehaviorSubject 两次发出真值时触发 ngOnChange

angular - 当 BehaviorSubject 两次发出真值时触发 ngOnChange

问题描述

我正在开发一个 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>

父组件.ts

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

现在我在父页面上有一个名为“清除过滤器”的按钮，单击该按钮时，我会从我的 BehaviorSubject 发出一个值为 true 的值。该值被子下拉组件订阅。 问题是： 当我第一次将值发出为“true”时，子组件（下拉组件）ngOnChanges 会被触发，但是当我再次发出相同的值时，ngOnchang 不会触发，我知道为什么。在这种情况下我该怎么办。

我想过发出随机数而不是布尔值，但有时随机数可能相同，这将使我的“清除过滤器”按钮不起作用。

标签： angularrxjs

解决方案

我最近遇到了同样的问题。因此，我没有将原始布尔值推送到 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};

并相应地更新您的代码。

推荐阅读