时间戳

首页 > 解决方案 > 将角度异步管道与 BehaviourSubject/ReplaySubject 和 auditTime/debounceTime 一起使用

angular - 将角度异步管道与 BehaviourSubject/ReplaySubject 和 auditTime/debounceTime 一起使用

问题描述

我正在尝试使用角度异步管道订阅 BehaviourSubject/ReplaySubject。我还必须使用 auditTime 或 debounceTime 运算符来丢弃一些值。

这是一个示例（我使用 Angular CLI 版本 7.3.0 并仅更改了 app.component）：

import {Component, OnInit} from '@angular/core';
import {Observable, ReplaySubject, Subject} from 'rxjs';
import {auditTime, tap} from 'rxjs/operators';

@Component({
  selector: 'app-root',
  template: `{{value$ | async}}`,
  styleUrls: ['./app.component.less']
})
export class AppComponent implements OnInit {

  private readonly subjectWithState: Subject<number>;

  constructor() {
    this.subjectWithState = new ReplaySubject(1);
  }

  ngOnInit(): void {
    this.subjectWithState.next(42);
  }

  get value$(): Observable<number> {
    return this.subjectWithState.asObservable()
      .pipe(
        tap(value => console.log(value)),
        auditTime(1000),
      );
  }
}

问题是主题不会停止发出（单个）值，并且我没有得到任何输出（请参阅控制台日志）。使用简单的 Subject 或没有auditTime(1000) ，一切都按预期工作。

我找不到任何可以解释这种行为的东西。如何将 auditTime 或 debounceTime 运算符与异步管道和 BehaviourSubject 或 ReplaySubject 一起使用？

标签： angularrxjs

解决方案

每次视图访问 value$ 时，都会创建一个新的 observable。不要使用 getter 属性并创建一个属性，以便访问 observable 的相同实例。

  value$ = this.subjectWithState.asObservable()
    .pipe(
      tap(value => console.log(value)),
      auditTime(1000),
    );

推荐阅读