Angular View 绑定不使用简单的布尔值更新

Question

Goodday，这可能是个小问题，但我无法解决问题。

我有一个简单的服务来切换布尔值，如果布尔值为真，则活动的类应该出现在我的 div 上，如果为假，则没有类。就这么简单。但是布尔值得到了更新，但我的观点没有对此做出反应。我是否必须以某种方式通知我的观点发生了变化？

服务：

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

@Injectable({
  providedIn: 'root'
})
export class ClassToggleService {

    public menuActive = false;

    toggleMenu() {
      this.menuActive = !this.menuActive;
    }
}

视图（左侧菜单组件）：

 <div id="mainContainerRightTop" [class.active]="classToggleService.menuActive == true">

切换点（顶部菜单组件）：

<a id="hamburgerIcon" (click)="classToggleService.toggleMenu()">

Answer 1

这是因为您更改的是服务而不是组件上的值，因此 Angular 不需要更新组件，因为它没有更改。如果要在修改服务元素时更新组件的视图，则必须使用 Observables 和 Subjects，并订阅它们。这样当元素发生变化时，会自动通知所有订阅的组件。

@Injectable({
  providedIn: 'root'
})
export class ClassToggleService {

    public menuSubject: Subject<boolean> = new BehaviorSubject<boolean>(false);
    public menuActive = this.menuSubject.asObservable();
    toggleMenu(val : boolean) {
      this.menuSubject.next(val);
    }
}

并且在您的组件中只需实现 OnInit 接口并订阅您的服务中的 observable：

public localBool = false;
ngOnInit() {
   this._myService.menuActive.subscribe(value => this.localBool = value);
}
ComponentToggleMenu() {
   this._myService.toggleMenu(!this.localBool);
}

然后你的html：

    <div id="mainContainerRightTop" [class.active]="localBool">
   <a id="hamburgerIcon" (click)="ComponentToggleMenu()">

Answer 2

为什么我们需要服务，这应该与组件类集成。作为一般规则，您不应该在模板文件中调用服务方法。

export class TestComponent implements OnInit{
   public menuActive = false;

    toggleMenu() {
      this.menuActive = !this.menuActive;
    }
}

模板：

<div id="mainContainerRightTop" [class.active]="menuActive">