我们如何在 rxjs 的管道中捕获事件发射器的事件发射

Question

我必须在管道中捕获事件发射器的事件发射，并在此基础上执行一些操作。

下面是html和ts文件的sn-p代码

xyx.component.html

    <div *ngIf="count | async as count">
  <div style="text-align: center">
    <div>{{ count.counter }}</div>
    <div>
      <input type="button" value="start" (click)="start.emit()">
      &nbsp;
      <input type="button" value="stop" (click)="stop.emit()">
    </div>
  </div>
</div>

---

xyx.component.ts

@Component({
  selector: 'xyz-app',
  templateUrl: './xyz.component.html',
  styleUrls: ['./xyz.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class XYZComponent {
  public readonly count: Observable<{
    counter: number,
  }>;

  public readonly start: EventEmitter<void> = new EventEmitter();
  public readonly stop: EventEmitter<void> = new EventEmitter();

  constructor() {
    this.count = interval(1000).pipe(
      map(counter => counter + 1),
      startWith(0),
      map(counter => ({counter})),
    );
  }
}

我应该在管道中做什么来捕获该事件发出并执行计数器的启动和停止操作。

Answer 1

环形管道负责转换数据，异步管道负责订阅它的 observable 并在组件销毁时取消订阅。

您可以通过将 null 分配给 'count' observable 并在启动时分配给新的 observable 来完成停止和启动的工作

但你也可以通过像takeUntil, repeatWhen这样的rxjs操作符来完成这项工作

  counter: Observable<number>;
  start = new Subject();
  stop = new Subject();

  constructor() {
    this.counter = interval(1000).pipe(
      map(counter => counter + 1),
      startWith(0),
      takeUntil(this.stop),
      repeatWhen(() => this.start)
    );
  }

检查这个demo ?