Question

我有3个组件：FilterComponent，MonthSliderComponent和ChartComponent。

当FilterComponent或MonthSliderComponent通过订阅两者来更新时，CharComponent会更新。

MonthSliderComponent也订阅了FilterComponent。我使用ReplaySubject。如果我留在同一页面并更改过滤器或monthSlider，则没有问题。

但是还有其他页面也使用FilterComponent和MonthSliderComponent，当我更改它们时，我回到带有ChartComponent的页面，两个订阅都被执行。 MonthSliderComponent首先执行，但我需要FilterComponent成为第一个。有没有办法管理这个？

我的代码：

@Injectable()
export class FilterService {
    ...
    filterReplaySubject: ReplaySubject<any> = new ReplaySubject(1);
    ...
}


@Injectable()
export class MonthSliderService {
    ...
    monthSliderReplaySubject: ReplaySubject<any> = new ReplaySubject(1);
    ...   
}


@Component({
    ...
})
export class MonthSliderComponent implements ngOnInit, OnDestroy {
    private subscripcion: Subscription;

    constructor(private filterService: FilterService) {}

    ngOnInit(): void {
        this.subscripcion = this.filterVm.filterReplaySubject
        .subscribe(params => {
            ...
        }); 
    }
}


@Component({
    ...
})
export class ChartComponent implements ngOnInit, OnDestroy {
    private subscripcion: Subscription;

    constructor(private filterService: FilterService,
        private monthSliderService MonthSliderService) {}

    ngOnInit(): void {
        this.subscripcion = this.filterVm.filterReplaySubject
        .subscribe(params => {
            ...
        });

        this.subscripcion.add(this.monthSliderVm.monthSliderSubject
        .subscribe(params => {
            ...
        }));
    }
}

Answer 1

这是因为您正在使用这些组件的相同实例，将共享组件放入共享模块，并从共享模块中导出它们，

然后将共享模块导入您想要访问组件的模块中。这将创建这些组件的单独实例，逻辑将只访问这些实例

在另一个订阅之后执行一个订阅（按顺序）

1 个答案: