javascript - BuilderNavbarService 中的全局变量被覆盖的问题

Question

我的应用程序中有一个功能允许用户实时更改组件的颜色。

但是我遇到了一些问题。

无论何时更改组件的颜色，用户都无法将组件颜色重置为默认值。

保存配置的全局变量似乎被所做的更改覆盖，即使它们已加载到文件中。

用户可以继续更改组件的颜色，但是当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);
  }
}

标签： javascriptangulartypescriptsubscription