Angular RxJS : event emitted twice

Question

我编写了两个可观察值:

一个用于捕获表单提交事件:

<form role="form" (ngSubmit)="search()">
   ...
</form>

并且 search() 到达并发出:

private search(): void {
    this.searchClickSubject.next();
}

在组件构造函数中:

private searchClickSubject:Subject<void>;
private searchClick$:Observable<any>;

constructor() {
    this.searchClickSubject = new Subject<void>();
    this.searchClick$ = this.searchClickSubject.asObservable();
}

如您所见，我使用 searchClick$ 上的 searchClickSubject.asObservable 方法从主题 searchClickSubject 创建了一个 Observable .

从现在开始，我将使用这个 searchClick$ Observable 来捕获提交表单。

之后，我将创建另一个 Observable:

    this.searchQuery$ = this.searchClick$.pipe(
        map(() => <Query>{
            offset: 0,
            limit: 10
        })
    );

因此，每次发出查询时，我都会使用自定义可管道函数发出请求:

    this.metrics$ = this.searchQuery$
        .pipe(
          pageLoading(),
          makeRequest(),
          loadedPage()
        );

这是我的ngOnInit():

public ngOnInit() {            
    // Grab search button click event
    this.searchQuery$ = this.searchClick$.pipe(
        map(() => <Query>{
            offset: 0,
            limit: 10
        })
    );

    this.metrics$ = this.searchQuery$
        .pipe(
          //...
        );
}

但是，请求会启动两次。

我使用async管道创建订阅:

<div class="row" *ngIf="!(metrics$ | async)" style="margin: 1.54em;">

<div *ngIf="metrics$ | async; let metric;"...

有什么想法吗？

Answer 1

您订阅了可观察的metrics$两次。发生的情况如下:

1. 您使用 *ngIf="!(metrics$ | async)" 进行订阅.
2. 当您点击搜索时，它会立即触发可观察对象以及您链接到其上的所有内容，包括您的请求。
3. 您使用 *ngIf="metrics$ | async; let metric;" 进行订阅.
4. 第 2 步再次单独进行。

使用share() metrics$ 中的运算符以防止在新订阅上重新发出请求。如果你想更深入地了解这个主题，请查看这个great article .