Управление количеством сетевых вызовов в Angular через RxJS не работает должным образом

Question

В моем приложении Angular я получаю некоторые выборки фильтров в компоненте среднего брата и затем передаю их последнему компоненту получения, например так:

@Output() sendFilterValues = new EventEmitter();

onFilterValuesReceived({ 'zip' : zipArray, 'firstName' : firstName,
'lastName' : lastName, 'language' : language, 'location' : location, 'branch' : branch })
{
    this.sendFilterValues.emit({ 'zip' : zipArray, 'firstName' : firstName,
    'lastName' : lastName, 'language' : language, 'location' : location, 'branch' : branch });
}

Затем я собираю эти значения фильтра в получающемкомпонент, вот так:

<grid [records]="records"
    (sendChange)="pageChange($event)"
    (sendFilterValues)="onFilterReceived($event)">
</grid>

А затем я делаю сетевой вызов, например, так:

public onFilterReceived(values)
{
    let filters = {};

    if (values) {
        filters = values;
    }

    this.route.params.subscribe(
        (params: any) => {
            this.page = params['page'];
        }
    );

    let fn = resRecordsData => {
        this.records = resRecordsData;
    };

    console.log('onFilterReceived() firing...'); // I see this 10 times in the console

    this.streamFiltersService.getByFilters(
        this.page - 1, this.pagesize, this.currentStage, this.language = filters['language'], this.location = filters['location'],
        this.zipcode = filters['zip'], this.firstName = filters['firstName'], this.lastName = filters['lastName'],
        this.branch = filters['branch'], fn);
}

Это (вроде) работает.

Однако ... потому что фильтрзначения приходят один за другим, и в итоге я делаю десять сетевых запросов.И иногда, при повторной загрузке компонента после того, как пользователь ушел, а затем вернулся, эти сетевые вызовы (которые являются асинхронными) возвращаются не в порядке (как, конечно, может случиться), и я в конечном итоге отображаю нефильтрованные данныена экране.

Итак, что я пытаюсь сделать, так как это возвращает observable, это использовать какой-то оператор RxJS, чтобы эффективно сделать только один сетевой вызов.Однако то, что я пробовал до сих пор, похоже, не имеет никакого эффекта.

Сетевой запрос, выглядит так в сервисе:

public getByFilters(page, pagesize, stage?, language?, location?, zipcode?, firstName?, lastName?, branch?, fn?: any)
{
    return this.apiService.get({
      req: this.strReq, reqArgs: { page, pagesize, stage, language, location, zipcode, firstName, lastName, branch }, callback: fn });
}

Теперь, так как яЧтобы сделать только один вызов, я попытался добавить пару различных операторов RxJS, например takeLast, mergeAll, combineAll, например так:

public getByFilters(page, pagesize, stage?, language?, location?, zipcode?, firstName?, lastName?, branch?, fn?: any)
{
    return this.apiService.get({
      req: this.strReq, reqArgs: { page, pagesize, stage, language, location, zipcode, firstName, lastName, branch }, callback: fn }).takeLast;
}

Это, похоже, не имеет никакого эффекта, потому чтоconsole.log В моей функции onFilterReceived() эта функция по-прежнему отображается 10 раз.

Я что-то здесь упускаю?Как я могу убедиться, что сетевой вызов происходит только один раз здесь?Я открыт для предложений, основанных на приведенном выше коде, чтобы разрешить эту ситуацию - через RxJs или другое решение.