Связывание Angular View не обновляется с простым логическим значением - PullRequest
Новая
       8

Связывание Angular View не обновляется с простым логическим значением

0 голосов
/ 22 ноября 2018

Goodday, это, вероятно, вопрос nooby, но я не могу заставить его работать.

У меня есть простой сервис, который переключает логическое значение, если логическое значение true, класс active должен появиться в моем 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()">

Ответы [ 2 ]

0 голосов
/ 22 ноября 2018

Это потому, что вы изменяете значение в службе, а не в компоненте, поэтому 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 и подпишитесь на наблюдаемое в вашем сервисе: 

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()">
0 голосов
/ 22 ноября 2018

Зачем нам нужен сервис, он должен быть интегрирован с классом компонентов.Как правило, вы не должны вызывать метод службы в файле шаблона. 

export class TestComponent implements OnInit{
   public menuActive = false;

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

Шаблон: 

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