angular - 使用角度在本地保存当前主题值

Question

实际上我想保存用户在浏览器中激活的当前主题。当用户下次进入并打开浏览器或浏览器自动刷新时，我不会将保存的主题更改为默认主题。为此，我尝试了以下代码片段。我正在使用带材料的角度。谁能帮我吗？

这是我到目前为止尝试过的代码。

app.component.html

<div id="app-main" class="app-main full-height"
   [ngClass]="{'fixed-header' : AppConfig.fixedHeader,
               'nav-collapsed' : AppConfig.navCollapsed,
               'nav-behind' : AppConfig.navBehind,
               'layout-boxed' : AppConfig.layoutBoxed,
               'theme-gray' : AppConfig.theme == 'gray',
               'theme-dark' : AppConfig.theme == 'dark',
               'sidebar-sm' : AppConfig.sidebarWidth == 'small',
               'sidebar-lg' : AppConfig.sidebarWidth == 'large'}">
  <router-outlet></router-outlet>
</div>

header.component.html

<li>
                    <label class="theme-option-check">
                        <input type="radio" name="theme" value="light" [(ngModel)]="AppConfig.theme" (change)="changeTheme(currentTheme)">
                        <span class="theme-option-item">
                            <span class="overlay">
                                <mat-icon>check</mat-icon>
                            </span>
                            <span><i class="far fa-sun"></i>&nbsp; Light Mode</span>
                        </span>
                    </label>
                </li>
                <li>
                    <label class="theme-option-check">
                        <input type="radio" name="theme" value="dark" [(ngModel)]="AppConfig.theme" (change)="changeTheme(currentTheme)">
                        <span class="theme-option-item">
                            <span class="overlay">
                                <mat-icon>check</mat-icon>
                            </span>
                            <span><i class="fas fa-adjust"></i>&nbsp; Dark Mode</span>
                        </span>
                    </label>
                </li>

header.component.ts

public currentTheme: string = APPCONFIG.theme; //by default here i am managing default color as light
ngOnInit() {
    this.currentTheme = localStorage.getItem('APISec-Theme');
    APPCONFIG.theme = this.currentTheme;
  }

changeTheme(t: any) {
    if (t !== null) {
      console.log('Select correct theme');
    } else {
      localStorage.setItem('APISec-Theme', t);
      console.log('t', t);
    }
  }

当我单击两个单选按钮中的任何一个时，在控制台中它显示为“空”值。那么如何将 null 更改为当前选定的值，例如如果我在 Light 上选择，那么主题应该更改浅色，当我在暗模式下选择时，它应该更改为暗主题。请帮我。即使浏览器刷新，所选值也应该在浏览器本地存储中。

谢谢。

标签： angulartypescriptangular-material