Question

Goodday，这可能是一个nooby问题，但我无法使其正常工作。

我有一个简单的服务，可以切换一个布尔值，如果布尔值是true，则活动类应该出现在我的div上，如果false则没有类。如此简单。但是布尔值会更新，但是我的观点对此没有反应。我是否必须以某种方式通知我自己的观点某些变化？

服务：

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不需要更新组件，因为它没有更改。如果要在修改service元素时更新组件的视图，则必须使用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接口并订阅您服务中的可观察对象：

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">

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

2 个答案: