Angular：如何通过服务在独立组件间用布尔值实现状态切换

我是Angular新手，想实现一个简单功能却卡壳了——我创建了header和main两个独立组件，header里有个切换按钮，main里有sidenav，希望点header的按钮就能控制main里sidenav的显示和隐藏。我知道非父子组件得用服务通信，于是写了下面这些代码：

现有代码 #

Toggle.service.ts #

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

@Injectable({
      providedIn: 'root'
    })
    export class ToggleService {
        
        choice = true;
        
        toggle() {
          this.choice = !this.choice;
        }
    }

Header.component.ts #

import { Component, OnInit } from '@angular/core';
import { ToggleService } from '../../services/toggle.service';


@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css'],
})
export class HeaderComponent implements OnInit {

  constructor(private myservice: ToggleService) { 
    
  }
  ComponentToggleMenu() {
    this.myservice.toggle();
 }
  ngOnInit(): void {
  }

Header.component.html #

<button (click)="ComponentToggleMenu()"><i class="material-icons">menu</i></button>

Main.component.ts #

import { Component, OnInit } from '@angular/core';
import { ToggleService } from '../../services/toggle.service';

@Component({
  selector: 'app-main',
  templateUrl: './main.component.html',
  styleUrls: ['./main.component.css'],
})
export class MainComponent implements OnInit {
  boolean = this.myservice.choice;


  constructor(private myservice: ToggleService) {}

  ngOnInit(): void {

  }

}

Main.component.html #

<mat-sidenav class="sidenav" mode="side" [opened]="boolean">

当前问题 #

点击按钮只会改变服务中的值，但main组件中的sidenav状态不会更新。我试过Subject、Observable、EventEmitter等方法都未成功，希望找到一种能在任意独立组件间修改值的通用方法，同时想了解Vue在组件通信方面是否更便捷。

更新说明 #

问题尚未解决，我把应用部署到了GitHub，应用为葡萄牙语界面，有两个切换按钮，main组件内的按钮可正常工作，header组件的按钮无法生效。

修复方案：用BehaviorSubject实现响应式状态同步 #

核心问题在于服务里的choice是普通变量，组件初始化时仅读取一次值，后续服务值变化时组件无法感知。改用RxJS的BehaviorSubject（适合带初始值的场景）就能实现状态的实时同步。

1. 重构ToggleService #

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

@Injectable({
  providedIn: 'root'
})
export class ToggleService {
  // 初始化BehaviorSubject，初始值设为true
  private choiceSubject = new BehaviorSubject<boolean>(true);
  // 暴露可观察对象，供组件订阅（禁止外部直接修改Subject）
  choice$ = this.choiceSubject.asObservable();

  toggle() {
    // 取当前值取反后推送新状态
    const currentValue = this.choiceSubject.value;
    this.choiceSubject.next(!currentValue);
  }
}

2. 调整MainComponent #

需要订阅服务的状态流，实时更新组件内的变量，同时记得在组件销毁时取消订阅避免内存泄漏：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { ToggleService } from '../../services/toggle.service';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-main',
  templateUrl: './main.component.html',
  styleUrls: ['./main.component.css'],
})
export class MainComponent implements OnInit, OnDestroy {
  isSidenavOpened = true;
  private statusSubscription!: Subscription;

  constructor(private myservice: ToggleService) {}

  ngOnInit(): void {
    // 订阅状态变化，实时更新组件变量
    this.statusSubscription = this.myservice.choice$.subscribe(value => {
      this.isSidenavOpened = value;
    });
  }

  // 组件销毁时取消订阅
  ngOnDestroy(): void {
    this.statusSubscription?.unsubscribe();
  }
}

3. 修改MainComponent模板 #

把绑定变量换成更新后的isSidenavOpened：

<mat-sidenav class="sidenav" mode="side" [opened]="isSidenavOpened">

为什么之前的尝试没生效？ #

• 普通变量：组件仅在初始化时读取一次服务值，后续服务值变化无法触发组件更新。
• Subject/BehaviorSubject：属于RxJS可观察对象，组件订阅后能实时接收状态变更通知，从而触发视图更新。

Vue组件通信对比 #

Vue在跨组件通信上确实有更轻量化的方案：

• 全局事件总线：Vue2可直接用new Vue()作为事件总线，Vue3可借助mitt库，通过emit和on方法快速实现组件间事件传递，代码简洁。
• Pinia状态管理：类似Angular服务+RxJS的思路，但Pinia集成了Vue的响应式系统，无需手动处理订阅/取消订阅，API更直观。
• provide/inject：适合深层嵌套组件，父组件通过provide提供值，任意子组件通过inject获取，无需逐层传递。

不过Angular的RxJS方案在处理复杂异步流时优势明显，掌握响应式编程思路后扩展性更强。

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