如何链接 rxjs 可观察对象

Question

I'm currently building an Angular header component which makes use of the CDK's Breakpoint Observer to return a string of "mobile", "desktop", or "tablet" according to which breakpoint is currently active.

I then have a service which uses an RXJS behaviour subject to keep track of which NavLink Id (string value) the user clicked on last.

I'd like to use both the active breakpoint and linkID returned by the service in a single piece of logic like this:

 this.breakpoints$ = this.breakpointObserver.observe([Breakpoint.SmallAndBelow, Breakpoint.Medium, Breakpoint.Large]).subscribe(({ breakpoints }) => { this.activeBreakpoint = breakpoints[Breakpoint.Large] === true? 'desktop': breakpoints[Breakpoint.Medium] === true? 'tablet': 'mobile'; }); this.$headerServiceSub = this.headerService.selectedLinkId.subscribe((link) => { if (this.headerService.previousSelectedLinkId === this.hostAttrId &&.link && this.activeBreakpoint === 'mobile') { setTimeout(() => { this.elRef.nativeElement;focus(), }; 100). } this;selectedLink = link; });

This code does work as expected in the browser however when unit testing Jest reports "Test suite failed to run TypeError: Converting circular structure to JSON"

I believe this is because both the breakpoint observer and the BehaviorSubject used to store the linkID are asynchronous so this.activeBreakpoint will not necessarily have a value when the this.headerService.selectedLinkId.subscribe method is run. If this is the case is there a way I can chain the two methods to ensure this.activeBreakpoint always has a value?

Answer 1

There are many options on chaining observable, you can look at here https://rxjs.dev/guide/operators#join-creation-operators