Question

我正在研究我的角度应用程序。当用户单击按钮更改主题时，主题将成功更改。但是一旦页面刷新，所选主题就会丢失并且默认主题正在加载。无论如何，即使刷新浏览器（或直到注销或特定时间段），仍然保持用户选择的主题。我用谷歌搜索但无法找到任何有效的解决方案。我正在考虑维护cookie中的主题设置。任何人都可以指导我吗？

theme.scss文件：

@import '~@angular/material/theming';
@include mat-core();

// Typography
$custom-typography: mat-typography-config(
  $font-family: Raleway,
  $headline: mat-typography-level(24px, 48px, 400),
  $body-1: mat-typography-level(16px, 24px, 400)
);
@include angular-material-typography($custom-typography);

// Default colors
$my-app-primary: mat-palette($mat-teal, 700, 100, 800);
$my-app-accent:  mat-palette($mat-teal, 700, 100, 800);

$my-app-theme: mat-light-theme($my-app-primary, $my-app-accent);
@include angular-material-theme($my-app-theme);

// Dark theme
$dark-primary: mat-palette($mat-indigo);
$dark-accent:  mat-palette($mat-pink, A200, A100, A400);
$dark-warn:    mat-palette($mat-deep-orange);
$dark-theme:   mat-dark-theme($dark-primary, $dark-accent, $dark-warn);

.dark-theme {
  @include angular-material-theme($dark-theme);
}

// Light theme
$light-primary: mat-palette($mat-grey, 200, 500, 300);
$light-accent: mat-palette($mat-brown, 200);
$light-warn: mat-palette($mat-deep-orange, 200);

$light-theme: mat-light-theme($light-primary, $light-accent, $light-warn);

.light-theme {
  @include angular-material-theme($light-theme)
}

component.html文件：

<mat-slide-toggle class="ctheme" (click)="toggleTheme()">Change Theme!</mat-slide-toggle>

toggleTheme() {
    if (this.isdarkTheme) {
       this.theme = 'default-theme';
    } else {
        this.theme = 'dark-theme';
    }
    this.overlayContainer.getContainerElement().classList.add(this.theme);
    this.componentCssClass = this.theme;
    this.isdarkTheme = !this.isdarkTheme;
    }

Answer 1

第1步：将主题代码包装到可共享的服务中。沿着这些方向的东西。请务必在app.module.ts。

中提供服务

@Injectable()
export class ThemeService {
  constructor() {}

  private _selectedTheme = "";

  get selectedTheme() {
    return this._selectedTheme;
  }

  setSelectedTheme(theme: string) {
    this._selectedTheme = theme;
  }

  setThemeToDefault() {
    this._selectedTheme = "";
  }
}

步骤2：将主题服务注入您想要的任何组件，以便您可以获取/保存所选主题。
第3步：将主题服务注入主app.component.ts

export class AppComponent implements OnInit {
  constructor(private themeService: ThemeService) { }
}

步骤4：使用@HostListener侦听卸载事件，以将当前选定的主题存储在本地存储中（如果存在）。确保import { HostListener } from '@angular/core';

@HostListener('window:unload', ['$event'])
unloadHandler(event) {
  if (this.themeService.selectedTheme) {
    window.localStorage.setItem("selectedTheme", this.themeService.selectedTheme);
  }
}

步骤5：在您的主app.component.ts中，设置主题（如果本地存储中存在主题。

）

ngOnInit() {
  var theme = window.localStorage.getItem("selectedTheme");
  if (theme) {
    this.themeService.setSelectedTheme(theme);
  }
}

即使页面重新加载，如何保持用户选择主题？

1 个答案: