我们如何通过共享服务将数据从一个页面发送到另一个页面

我有两个组件。在一个组件中有复选框。当用户单击更改页面时，我希望选中项目的值显示在另一个页面的组件上。在组件2中，当用户单击getcheckeditems时，我会从共享服务中检索要显示的值。但该值为空。

我已经阅读了一些关于堆栈溢出的解决方案，但它不起作用。这里

如何解决这个问题？

组件1按钮

<button (click)="changePage()">Change page</button>

组件2按钮

<button (click)="getChecked()">Get checked items</button>

共享服务.ts

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class SharedService {
checkedItems:any[];
checkedList=new BehaviorSubject<any>([]);
constructor() { 
}
setCheckedList(val:any[]){
this.checkedItems=val;
this.checkedList.next(this.checkedItems);
}
getCheckedItems():BehaviorSubject<any>{
return this.checkedList;
}
}

组件1

changePage(){
this.checkedIDs = []
this.checkboxesDataList.forEach((value, index) => {
if (value.isChecked) {
this.checkedIDs.push(value.id);
}
});
this.sharedService.setCheckedList(this.checkedIDs);
this.router.navigate(['/list']);
}

checkboxesDataList = [
{
id: '1',
label: 'name',
isChecked: true
}
]

组件2

getChecked(){
this.items=this.sharedService.getCheckedItems();
console.log(this.items)
}