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);
  }

现在我在父页面上有一个名为“clear filter”的按钮，点击该按钮，我将从BehaviorSubject中发出一个值为true。子值下拉组件正在对此值进行子选项。 问题是： 第一次当我发出值为“true”时，比子组件（下拉组件）ngOnChanges被触发但当我再次发出相同的值时，ngOnchang不会触发，我知道原因。在这种情况下我该怎么做。

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

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

这就是我现在解决的问题，直到获得更好的方式，

{{1}}

当BehaviorSubject发出两次true值时触发ngOnChange

2 个答案: