BehavioursSubject值意外更新

时间:2018-10-04 06:17:47

标签: angular rxjs observable

import { Injectable, OnDestroy } from "@angular/core"; import { BehaviorSubject } from "rxjs/BehaviorSubject";

@Injectable() export class ClinicalFilteringService implements OnDestroy {
    private filtersSource = new BehaviorSubject<any>({});
    filters = this.filtersSource.asObservable();

    private savedSearchesSource = new BehaviorSubject<any>({});
    savedSearches = this.savedSearchesSource.asObservable();

    setFilters(name, filter){
        let currentFilter = this.filtersSource.getValue();
        currentFilter[name] = filter;
        if(currentFilter[name].length === 0){
            delete currentFilter[name];
        }
        this.filtersSource.next(currentFilter);
    }

    saveSearches(filters, name){
        let currentSavedSearches = this.savedSearchesSource.getValue();
        currentSavedSearches[name] = filters;
        this.savedSearchesSource.next(currentSavedSearches);
    }

}

我是新手,我在BehaviourSubject上遇到麻烦。所以我有两个BehavioralSubject,分别是filtersSourcesavedSearchesSourcesavedSearchesSource将在点击事件中更新,而filtersSource将在图表上的过滤事件中更新。问题是每次我调用setFilters setFilters来更新filtersSource时,它也会更新this.savedSearchesSource.getValue()的值。我不确定为什么会这样。

以下是使用该服务的组件

import { Component, OnDestroy, ChangeDetectorRef, OnInit } from '@angular/core';
import { Auth } from '../../../services/auth-service';
import { Subscription } from 'rxjs/Subscription';
import { Params, ActivatedRoute, Router } from '@angular/router';
import { SearchBarService } from '../../../services/search-bar-service';
import { GenericAutocompleteResult } from '../../../model/autocomplete-result';
import { MatSnackBar, MatSnackBarRef } from '@angular/material';
import { SnackbarDemoComponent } from '../../parts/snackbar-demo/snackbar-demo.component';
import { ClinicalFilteringService } from '../../../services/clinical-filtering.service';
import { HelperService } from '../../../services/helper.service';

const SMALL_WIDTH = 720;

@Component({
    selector: 'app-search',
    templateUrl: './search.component.html',
    styleUrls: ['./search.component.css'],
    providers: [SearchBarService]
})
export class SearchComponent implements  OnInit {
    subscriptions: Subscription[] = [];
    sbSub: Subscription = null;
    autocomplete: GenericAutocompleteResult<any>;
    error = '';
    searching = false;
    sb: MatSnackBarRef<SnackbarDemoComponent> = null;
    filters = {};
    objectKeys= Object.keys;
    private mediaMatcher: MediaQueryList = matchMedia(`(max-width: ${SMALL_WIDTH}px)`);

    constructor(public searchBarService: SearchBarService,
                public auth: Auth,
                private route: ActivatedRoute,
                private cd: ChangeDetectorRef,
                public snackBar: MatSnackBar,
                private router: Router,
                private clinicalFilteringService: ClinicalFilteringService,
                private helper: HelperService,
            ) {
        if (auth.authenticated()) {
            this.subscriptions.push(route.params.subscribe(p => this.parseParams(p)));
        }
    }
    ngOnInit(): void {
        this.clinicalFilteringService.filters.subscribe(filter => this.filters = filter)
    }

    ngOnDestroy() {
        this.subscriptions.forEach((s => s.unsubscribe()));
    }

    handleError(e: string) {
        this.error = e;
    }


    deleteFilter(name: string){
        return this.clinicalFilteringService.deleteFilter(name);
    }

    saveSearches(name){
        return this.clinicalFilteringService.saveSearches(name);
    }
}

它会不断更改this.filters用作服务功能参数的位置。对于如何解决此问题的任何帮助将不胜感激。

1 个答案:

答案 0 :(得分:0)

感谢JBNizet。我发现问题是因为我不断重新发射相同的对象,所以在重新发射之前我先对其进行了变异。我的解决方案是创建一个新对象,该对象保存用于.next()的值。