使用按钮单击更改两个组件的颜色

Posted 2023-03-05

【中文标题】使用按钮单击更改两个组件的颜色

【英文标题】：change color in two components using a button click

【发布时间】：2021-12-09 07:12:03

【问题描述】：

就像标题所说的那样。我在书籍组件中有一个按钮，当它单击书籍组件中的 div 颜色时，导航栏组件中的另一个 div 应该改变它的颜色。

- 这是书籍组件：

export class BooksComponent implements OnInit 

  status:boolean = true ;
  color:boolean ;

  constructor(private colorService:ShareColorService)  
  
  changeTheme()
    this.status = !this.status ;
   ;

  public send():void
    this.colorService.updateColor(this.status) ; 
  

  ngOnInit(): void 
  

这是将数据值从书籍传递到导航栏组件的服务代码：

export class ShareColorService 
  
  private notifs = new Subject<boolean>() ;
  
  constructor()  

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

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

这是导航栏组件：

export class NavbarComponent implements OnInit 
  
  public navbarNewColor:boolean ;
  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) ;
    

控制 ngclass 改变颜色的三元运算符：

<nav  class="navbar navbar-expand-lg navbar-light" [ngClass]="navbarNewColor ? 'bg-light':'bg-dark'">

【问题讨论】：

您是如何声明服务的？ （确保只有一个实例）此外，我们也遇到了问题，但究竟什么不起作用？

当我单击按钮时，只有 div 的书籍组件的颜色会发生变化。其他组件没有任何反应

【参考方案1】：

您可以在此处使用更被动的方法，而不是通过订阅手动将值分配给 navbarNewColor 变量：

export class NavbarComponent 
  
  public navbarClass$ = this.colorService.getColor().pipe(
    map(isLightMode => isLightMode ? 'bg-light' : 'bg-dark')
  );

  constructor(private colorService:ShareColorService)  

<nav class="navbar navbar-expand-lg navbar-light" [ngClass]="(navbarClass$ | async)">

这应该会给你一个想法！

【讨论】：

我喜欢你的方法，但我的问题是要理解为什么它不起作用，而不是如何使它起作用，它仍然让我感到困惑

你的组件是否使用OnPush变更检测策略？此外，如果您可以添加一个最小可重现的沙箱，则更容易查明问题。

不，我正在使用 (click) 事件来检测任何更改。之后，一个变量将从 true 切换为 false，然后将此变量的值（状态：布尔值）发送到另一个组件。

【参考方案2】：

终于找到答案了！

正如我所料，这很明显。通过发送按钮点击值（true 或 false）来更新div 颜色的服务方法只运行一次，因为它在点击按钮功能之外。

changeTheme()
    this.status = !this.status;
    this.colorService.updateColor(this.status); 
    console.log(this.status);