基于选中选项启用/禁用按钮功能失效问题排查

问题根源在于你的服务中使用普通变量存储选中值，Component B仅在ngOnInit阶段读取一次值，后续服务内的值更新时，Component B无法自动感知到变化，导致按钮状态不会同步更新。

解决方案：使用RxJS的BehaviorSubject实现组件间状态同步 #

1. 修改服务代码，改用BehaviorSubject管理状态

BehaviorSubject可以保存当前的最新值，并且能向订阅它的组件发送值变化通知，非常适合这种跨组件的状态同步场景：

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

@Injectable({ providedIn: 'root' })
export class MyService {
  // 初始化BehaviorSubject，默认值为undefined
  private selectedValueSubject = new BehaviorSubject<number | undefined>(undefined);
  // 对外暴露可观察对象，禁止外部直接修改内部状态
  selectedValue$ = this.selectedValueSubject.asObservable();

  setSelectedValue(value: number) {
    // 发送新的选中值
    this.selectedValueSubject.next(value);
  }

  // 可选：获取当前同步值的方法
  getSelectedValue(): number | undefined {
    return this.selectedValueSubject.value;
  }
}

2. 修改Component B的状态更新逻辑

通过订阅服务的可观察对象，实时响应选中值的变化：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { MyService } from '../my.service';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-component-b',
  templateUrl: './component-b.component.html'
})
export class ComponentBComponent implements OnInit, OnDestroy {
  isButtonEnabled = false;
  private valueSubscription?: Subscription;

  constructor(private myService: MyService) {}

  ngOnInit() {
    // 订阅选中值的变化，实时更新按钮状态
    this.valueSubscription = this.myService.selectedValue$.subscribe(selectedValue => {
      this.isButtonEnabled = selectedValue !== undefined;
    });
  }

  ngOnDestroy() {
    // 组件销毁时取消订阅，避免内存泄漏
    this.valueSubscription?.unsubscribe();
  }
}

可选简化方案：使用AsyncPipe

如果不想手动管理订阅，可以直接在模板中使用Angular的AsyncPipe，它会自动处理订阅和销毁：

<button 
  [ngClass]="{'disabled': !(myService.selectedValue$ | async)}" 
  [disabled]="!(myService.selectedValue$ | async)"
>
  Click me
</button>

这种情况下，Component B的类代码可以简化，不需要订阅和取消订阅的逻辑。

Component A的代码无需修改，onSelectChange中调用服务的setSelectedValue的逻辑是正确的。

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