Проблема с перезаписью глобальной переменной в BuilderNavbarService - PullRequest
Новая
       11

Проблема с перезаписью глобальной переменной в BuilderNavbarService

0 голосов
/ 14 октября 2019

В моем приложении есть функция, позволяющая пользователю в реальном времени изменять цвет компонента.

Однако у меня возникают некоторые проблемы.

Всякий раз, когда цвет компонента изменяется, пользователь не может сбросить цвет компонента обратно к значению по умолчанию.

Глобальные переменные, которые содержат конфигурацию, кажутся перезаписанными внесенными изменениями, даже если они загружены в файл.

Пользователь может продолжить изменять цвет компонента, но когда вызывается setDefaultNavbarTemplate, стиль не может вернуться к тому, что был ранее.

Код ниже: 

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
import { ActiveTemplates } from '../../builder';
import DefaultTemplate from 'src/assets/data/web-templates/web-template-default.json';

@Injectable()
export class BuilderNavbarService {
  DEFAULT_NAVBAR_STYLE = DefaultTemplate['navbarStyle'];
  DEFAULT_NAVBAR_LINK_STYLE = DefaultTemplate['navbarLinkStyle'];
  DEFAULT_NAVBAR_BRAND_STYLE = DefaultTemplate['navbarBrandStyle'];

  navbarTemplate = new BehaviorSubject<string>(ActiveTemplates.Default);
  navbarStyle = new BehaviorSubject<Object>(null);
  navbarLinkStyle = new BehaviorSubject<Object>(null);
  navbarBrandStyle = new BehaviorSubject<Object>(null);

  setNavbarTemplate(templateId: string) {
    switch (templateId) {
      case ActiveTemplates.Default:
        this.navbarTemplate.next(ActiveTemplates.Default);
        this.navbarStyle.next(this.DEFAULT_NAVBAR_STYLE);
        this.navbarLinkStyle.next(this.DEFAULT_NAVBAR_LINK_STYLE);
        this.navbarBrandStyle.next(this.DEFAULT_NAVBAR_BRAND_STYLE);
        break;
      default:
        break;
    }
  }

  setDefaultNavbarTemplate(templateId: string) {
    switch (templateId) {
      case ActiveTemplates.Default:
        this.navbarTemplate.next(ActiveTemplates.Default);
        this.navbarStyle.next(DefaultTemplate['navbarStyle']);
        this.navbarLinkStyle.next(DefaultTemplate['navbarLinkStyle']);
        this.navbarBrandStyle.next(DefaultTemplate['navbarBrandStyle']);
        break
      default:
        break
    }
  }
}

Я могу обойти это, сделав это, но я не уверен, почему это работает, поскольку переменная DefaultTemplate содержит те же значения: 

setDefaultNavbarTemplate(templateId: string) {
    if (templateId == ActiveTemplates.Default) {
      const navbarStyle = {
        'background-color': '#FFFFFF'
      };
      const navbarLinkStyle = {
        'color': '#000'
      };
      const navbarBrandStyle = {
        'color': '#757575'
      };
      this.navbarTemplate.next(ActiveTemplates.Default);
      this.navbarStyle.next(navbarStyle);
      this.navbarLinkStyle.next(navbarLinkStyle);
      this.navbarBrandStyle.next(navbarBrandStyle);
    }
}

Этоэто содержимое web-template-default.json: 

{
  "id": "web-template-default",
  "navbarStyle": {
    "background-color": "#FFFFFF"
  },
  "navbarLinkStyle": {
    "color": "#000"
  },
  "navbarBrandStyle": {
    "color": "#757575"
  }
}

Это код, который выполняет замену цвета: 

export class NavbarColourPickerComponent implements OnInit {
  isMobile: Observable<BreakpointState>;

  // Set the default style
  navbarStyle: any = {
    'background-color': '#FFFFFF'
  };
  navbarBrandStyle: any = {
    'color': '#757575'
  };
  navbarLinkStyle: any = {
    'color': '#000'
  };
  navbarTemplate: string = ActiveTemplates.Default;

  private navbarStyleSubscription: Subscription;
  private navbarBrandStyleSubscription: Subscription;
  private navbarLinkStyleSubscription: Subscription;
  private navbarTemplateSubscription: Subscription;

  constructor(
    private breakpointObserver: BreakpointObserver,
    private builderNavbarService: BuilderNavbarService
  ) {
  }

  ngOnInit() {
    this.isMobile = this.breakpointObserver.observe([Breakpoints.Handset]);
    this.navbarStyleSubscription = this.builderNavbarService.navbarStyle.subscribe(response => {
      if (response) {
        this.navbarStyle = response;
      }
    });
    this.navbarBrandStyleSubscription = this.builderNavbarService.navbarBrandStyle.subscribe(response => {
      if (response) {
        this.navbarBrandStyle = response;
      }
    });
    this.navbarLinkStyleSubscription = this.builderNavbarService.navbarLinkStyle.subscribe(response => {
      if (response) {
        this.navbarLinkStyle = response;
      }
    });
    this.navbarTemplateSubscription = this.builderNavbarService.navbarTemplate.subscribe(response => {
      if (response) {
        this.navbarTemplate = response;
      }
    });
  }

  setNavbarStyle() {
    this.builderNavbarService.navbarStyle.next(this.navbarStyle);
  }

  setNavbarBrandStyle() {
    this.builderNavbarService.navbarBrandStyle.next(this.navbarBrandStyle);
  }

  setNavbarLinkStyle() {
    this.builderNavbarService.navbarLinkStyle.next(this.navbarLinkStyle);
  }

  resetToDefault() {
    this.builderNavbarService.setDefaultNavbarTemplate(this.navbarTemplate);
  }
}
...