A common approach is to use Observable to share data through an intermediate service

As follows

• Intermediate service:

import { Injectable } from '@angular/core';
    import { BehaviorSubject, Observable } from 'rxjs';
    
    @Injectable({
      providedIn: 'root'
    })
    export class SharedDataService {
      private dataSource = new BehaviorSubject<any>('初始值');
      public data$: Observable<any> = this.dataSource.asObservable();
    
      updateData(newData: any): void {
        this.dataSource.next(newData);
      }
    }

• First component (data sender):

import { Component } from '@angular/core';
import { SharedDataService } from './shared-data.service';

@Component({
  selector: 'app-first-component',
  template: `...`
})
export class FirstComponent {
  constructor(private sharedDataService: SharedDataService) {}

  updateSharedData(): void {
    this.sharedDataService.updateData('新值');
  }
}

• Second component (data consumer):

import { Component, OnDestroy } from '@angular/core';
    import { SharedDataService } from './shared-data.service';
    import { Subscription } from 'rxjs';
    
    @Component({
      selector: 'app-second-component',
      template: `...`
    })
    export class SecondComponent implements OnDestroy {
      sharedData: any;
      private subscription: Subscription;
    
      constructor(private sharedDataService: SharedDataService) {
        this.subscription = this.sharedDataService.data$.subscribe(data => {
          this.sharedData = data;
          // 在这里消费数据
        });
      }
    
      ngOnDestroy(): void {
        this.subscription.unsubscribe();
      }
    }

Don't forget to unsubscribe when the consumer component is destroyed, otherwise it will cause a memory leak.