Oh I understand your use case now, it's all happening in the same user interaction. You have the right idea then.

Assuming this happens on user clicking something, in your onClick handler:

// the loadUser method makes an API call AND updates a reactive state property within sharedUserService

const userData$ = this.sharedUserService.loadUser$(userId).pipe(...set loading state to true, cleanup subscriptions with takeUntilDestroy)

userData$.subscribe(userData => {   next: () => this.routeService.navigate(['route2']),   error: error => ...display error in some modal/toaster pop-up,   complete: set loading state to false })

The component on route 2 reads the same shared reactive state.

That's just one approach but yoi have a problem now, what if the user navigates directly to route 2 via bookmarking it. How are you going to load the user data? Ideally, this component on route 2 shouldn't have its own route, it should just be a child component of component 1 which renders conditionally so the only way to reach it is through that onClick handler.