Question

我正在尝试为Angular 7中的多个复选框应用去抖动时间。该想法是将api调用延迟x秒，以使应用程序性能更好（选中/取消选中复选框会调用对API的调用）。

每个复选框对应一个过滤器，该过滤器在选中/取消选中时将发送到后端，并确定从服务器返回的结果。我尝试使用此处提到的文章中建议的自定义防抖动指令， https://coryrylan.com/blog/creating-a-custom-debounce-click-directive-in-angular

该问题解决了单个输入字段的反跳问题，在我的情况下，如果我在反跳时间内多次选中和取消选中一个复选框，则无论单击多少次，都只会调用后端。但是我的问题是选中/取消选中多个复选框，并且在反跳时间内仅对API发出了一个请求。现在，每次我单击不解决我的问题的复选框时，都会对api进行调用。

以下是我正在使用的指令，它与文章中的示例类似：

import { Output, EventEmitter, OnInit, OnDestroy, Directive, ElementRef  } from '@angular/core';
import { debounceTime } from 'rxjs/operators';
import { HostListener } from '@angular/core';
import { Subscription, Subject } from 'rxjs';

@Directive({
  selector: '[appDebounceClick]'
})
export class DebounceDirective implements OnInit, OnDestroy{

  @Output() debounceClick = new EventEmitter();
  private clicks = new Subject();
  private subscription: Subscription;

  constructor(private elementRef: ElementRef) { }

  ngOnInit() {
    this.subscription = this.clicks.pipe(
      debounceTime(2000)
    ).subscribe(e => this.debounceClick.emit(e));
  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }

  @HostListener('change', ['$event'])
    clickEvent(event) {
    this.clicks.next(event);
  }
}

以下是我模板中的代码：

<ng-container *ngFor="let checkbox of checkboxList">
  <mat-checkbox *ngIf="checkbox.name == 'test'"  [(ngModel)]="checkbox.selected" appDebounceClick (debounceClick)="onChange($event,checkbox)" >
    {{checkbox.name}}
  </mat-checkbox>
</ng-container>

我觉得这里的问题是该指令适用于每个复选框，从而又创建了一个仅与单个复选框相关联的新Observable / Subject。我认为应该只有一个主题可以订阅复选框上的单击事件，但是我不确定如何实现这一点。希望对这个问题有任何想法，或者对解决这个问题有更好的想法。

Answer 1

您可以使用服务来集中Subject，显然服务必须是Singleton，以便所有复选框都发出一个主题，而debounceTime运算符对所有元素起作用。

另一方面，您可以实现相同的行为，但是在父组件中，我的意思是必须将Subject放置在父组件中。

决定取决于可重用性问题。

Angular中多个复选框的反跳功能

1 个答案: