点击按钮如何同时修改Angular中Books和Navbar两个组件的元素颜色

问题定位 #

现有代码存在三个核心问题导致需求无法实现：

• Books组件的changeTheme方法仅修改了本地状态status，没有同步调用方法将状态同步到共享服务，也没有给自身需要变色的DOM绑定样式切换逻辑
• 共享服务使用的是普通Subject，新订阅的组件无法拿到订阅前发布的状态，初始加载时Navbar组件拿不到初始颜色值，样式会出现异常
• Navbar组件的日志打印写在订阅回调外，永远只能拿到初始的undefined值，无法验证状态是否同步成功

修正步骤 #

1. 调整Books组件逻辑与模板 #

合并状态修改和同步逻辑，给自身DOM绑定样式切换：

export class BooksComponent implements OnInit {
  status:boolean = true ;

  constructor(private colorService:ShareColorService) { }
  
  changeTheme(){
    this.status = !this.status ;
    // 状态变更后直接同步给共享服务
    this.colorService.updateColor(this.status) ;
  } ;

  ngOnInit(): void {
  }
}

Books组件模板绑定：

<!-- 按钮绑定点击事件触发切换 -->
<button (click)="changeTheme()">切换主题颜色</button>
<!-- 给需要变色的div绑定动态样式 -->
<div [ngClass]="status ? 'bg-light':'bg-dark'">
  Books组件内需要变色的内容区域
</div>

2. 优化共享服务解决初始值问题 #

将普通Subject替换为BehaviorSubject，设置初始值，保证新订阅的组件可以立刻拿到最新状态：

import { BehaviorSubject, Observable } from 'rxjs';

export class ShareColorService {
  // 初始值和Books组件的status初始值保持一致
  private notifs = new BehaviorSubject<boolean>(true) ;
  
  constructor() { }

  public getColor(): Observable<boolean>{
    return this.notifs.asObservable() ; 
  }

  public updateColor(color: boolean){
    this.notifs.next(color) ;
  }
}

3. 修正Navbar组件逻辑 #

给状态变量加初始值，优化销毁逻辑，调整日志打印位置：

import { Subscription } from 'rxjs';

export class NavbarComponent implements OnInit {
  // 初始值和共享服务的初始值保持一致
  public navbarNewColor:boolean = true ;
  public subscription: Subscription ;
  constructor(private colorService:ShareColorService) { }

  public ngOnDestroy(): void{
    // 增加空值判断，避免未订阅成功时销毁报错
    this.subscription?.unsubscribe() ;
  }

  public ngOnInit(): void {
    this.subscription = this.colorService.getColor().subscribe(color => {
      this.navbarNewColor = color;
      // 移到订阅回调内才能打印最新的状态值
      console.log("navbarnewcolor :",this.navbarNewColor) ;
    }) ;
  }  
}

Navbar模板可以在原有基础上优化适配不同主题的文字配色：

<!-- 把固定的navbar-light也改成动态绑定，暗黑模式下用navbar-dark文字更清晰 -->
<nav class="navbar navbar-expand-lg" [ngClass]="navbarNewColor ? 'bg-light navbar-light':'bg-dark navbar-dark'">
  导航栏内容
</nav>

内容的提问来源于stack exchange，提问作者Mohamed Ali Mani