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

Question

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

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

如何解决这个问题？

组件 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)
  }

Answer 1

要从 BehaviorSubject 获取值，您必须调用 getValue()。

在 shared.service.ts 中，更新为

getCheckedItems():BehaviorSubject<any>{
   return this.checkedList.getValue();
}

Answer 2

您可以BehaviourSubject使用getValue()获取设置为最后一个值。

getChecked() {
    this.items = this.sharedService.checkedList.getValue();
}