如何使用angular将对象数组从一个页面传递到另一个页面

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class DataSharingService {
  private dataArray: any[] = [];

  constructor() { }

  setData(data: any[]) {
    this.dataArray = data;
  }

  getData() {
    return this.dataArray;
  }
}

import { Component } from '@angular/core';
import { DataSharingService } from '路径/DataSharingService';

@Component({
  selector: 'app-sender',
  template: `
    <button (click)="sendData()">发送数据</button>
  `
})
export class SenderComponent {
  dataArray: any[] = [
    { name: '对象1', value: 1 },
    { name: '对象2', value: 2 },
    { name: '对象3', value: 3 }
  ];

  constructor(private dataSharingService: DataSharingService) { }

  sendData() {
    this.dataSharingService.setData(this.dataArray);
  }
}

import { Component } from '@angular/core';
import { DataSharingService } from '路径/DataSharingService';

@Component({
  selector: 'app-receiver',
  template: `
    <ul>
      <li *ngFor="let item of receivedData">{{ item.name }} - {{ item.value }}</li>
    </ul>
  `
})
export class ReceiverComponent {
  receivedData: any[];

  constructor(private dataSharingService: DataSharingService) { }

  ngOnInit() {
    this.receivedData = this.dataSharingService.getData();
  }
}

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { SenderComponent } from '路径/SenderComponent';
import { ReceiverComponent } from '路径/ReceiverComponent';

@NgModule({
  imports: [BrowserModule],
  declarations: [SenderComponent, ReceiverComponent],
  bootstrap: [SenderComponent, ReceiverComponent]
})
export class AppModule { }