如何让Angular Service缓存数据同步到两个组件？

我有一个Angular组件，通过Service从数据库加载客户端数据。为避免每个组件重复请求数据库，我在Service中以“选中客户端”的形式缓存该数据。但在Client Details组件中订阅Service的selectedClient后，表单详情无法正常填充，以下是相关代码和问题分析：

ClientService代码 #

export class ClientService {
  Clients: Client[];

  constructor() {
    this.Clients = [
      {
        client:  0,
        name: "Fred",
        street: "Brockton Drive",
        address1: null,
        address2: null,
        city: "SomewhereVille",
        zipcode: "1234"
      },
      {
        client:  1,
        name: "Wilma",
        street: "Somerset Drive",
        address1: null,
        address2: null,
        city: "Elsewhere",
        zipcode: "0987"
      },
    ]
  }

  setCurrentClient(id: number) {
    var client = this.Clients[id];
    console.log(client);
    this.selectedClient.next(client);
  }

  readonly selectedClient: Subject<Client> = new Subject<Client>()
}

ClientComponent代码 #

export class ClientComponent implements OnInit {

  constructor(private route: ActivatedRoute, private router: Router, private clientService: ClientService) {
    console.log("order component activated");

    route.paramMap.subscribe((params: ParamMap) => {
      const cid = params.get("id");
      if (cid)
        clientService.setCurrentClient(Number.parseInt(cid));
      else
        this.selectedClient = undefined;
    })
    clientService.selectedClient.subscribe((data) => this.selectedClient = data)
  }

  selectedClient?: Client;

  ngOnInit(): void {
  }
}

ClientDetailsComponent代码 #

export class ClientDetailsComponent implements OnDestroy {

  ClientForm: FormGroup;
  token?: Subscription;

  constructor(private clientService: ClientService, private formBuilder: FormBuilder) {
    this.ClientForm = this.formBuilder.group<Client>(new Client());
    this.token = this.clientService.selectedClient.subscribe((data) => {
      this.selectedClient = data;
      this.ClientForm.setValue(this.selectedClient);
      console.log("Client activated");
    })
  }

  ngOnDestroy(): void {
    if(this.token) this.token.unsubscribe();
  }

  selectedClient?: Client;

  onSubmit(): void {
  }
}

问题根源 #

1. Subject的特性限制：Subject只会向订阅者发送订阅之后的新值。如果ClientDetails组件初始化时，setCurrentClient已经被调用过，组件会错过之前发送的客户端数据，导致表单无法填充。
2. 生命周期使用不规范：ClientComponent在构造函数中订阅路由参数和Service，不符合Angular生命周期最佳实践，可能引发初始化时序问题。
3. 表单初始化潜在问题：直接用new Client()作为FormGroup的类型定义和初始值，可能因null值或字段匹配问题导致setValue失败。

修复方案 #

1. 替换为BehaviorSubject：将Service中的Subject改为BehaviorSubject，它会保存最新值，并在新订阅时立即发送该值：

   // 修改Service中的定义
   readonly selectedClient: BehaviorSubject<Client | null> = new BehaviorSubject<Client | null>(null);
   
   // setCurrentClient方法无需修改，依然使用next发送值
   

2. 调整组件订阅到ngOnInit：将ClientComponent中的订阅逻辑移到ngOnInit钩子中，符合Angular生命周期规范：

   ngOnInit(): void {
     this.route.paramMap.subscribe((params: ParamMap) => {
       const cid = params.get("id");
       if (cid) {
         this.clientService.setCurrentClient(Number.parseInt(cid));
       } else {
         this.selectedClient = undefined;
         this.clientService.selectedClient.next(null); // 通知其他组件清除选中状态
       }
     });
     this.clientService.selectedClient.subscribe((data) => this.selectedClient = data);
   }
   

3. 优化表单初始化与值处理：显式定义表单控件，并处理null值情况，避免setValue失败：

   constructor(private clientService: ClientService, private formBuilder: FormBuilder) {
     // 显式定义每个表单控件，设置合理初始值
     this.ClientForm = this.formBuilder.group({
       client: [null],
       name: [''],
       street: [''],
       address1: [null],
       address2: [null],
       city: [''],
       zipcode: ['']
     });
   
     this.token = this.clientService.selectedClient.subscribe((data) => {
       this.selectedClient = data;
       if (data) {
         this.ClientForm.setValue(data);
       } else {
         this.ClientForm.reset(); // 无选中客户端时重置表单
       }
       console.log("Client activated");
     });
   }
   

内容的提问来源于stack exchange，提问作者Phoenix Stoneham