如何在Angular Material中將sidenav（mat-drawer）狀態保存到localstorage？

Question

我對 Angular Material 中的 mat-drawer 有問題。 我想將我的狀態保存到 localstorage 但 mat-drawer 總是打開的。

Sidenav 在沒有文本的情況下保持墊子圖標時具有擴展部分和關閉擴展部分。 當您單擊底部按鈕隱藏時，sidenav 關閉，但刷新頁面后 Sidenav 再次展開（但在 localstorage 中關閉）。

看起來像這樣：

打開的擴展墊抽屜

封閉式墊子抽屜

Sidenav 已打開但在本地存儲中已關閉

你知道怎么解決這個問題嗎？ 謝謝！

源代碼：

應用程序組件.html

<mat-drawer-container class="content-container" autosize >
 <mat-drawer
  mode="side"
  class="sidenav"
  disableClose="true"
  opened="true">
<div class="sidenav-container">
<mat-nav-list>
      <a class="nav-item nav-link" mat-list-item routerLink="/private/dashboard" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">
        <mat-icon style="padding-right:5px;"  matTooltipPosition="right" [matTooltipDisabled]="disabledTooltip">dashboard</mat-icon>
        <span *ngIf="isExpanded">Dashboard</span>
      </a>

      <a class="nav-item nav-link" mat-list-item routerLink="/private/companies" routerLinkActive="active">
        <mat-icon style="padding-right:5px;">stars</mat-icon>
        <span *ngIf="isExpanded">Subjects</span>
      </a>

      <a class="nav-item nav-link" mat-list-item routerLink="/private/users" routerLinkActive="active">
        <mat-icon style="padding-right:5px;">group</mat-icon>
        <span *ngIf="isExpanded">Users</span>
      </a>

      <a class="nav-item nav-link" mat-list-item routerLink="/private/api-customers" routerLinkActive="active">
        <mat-icon style="padding-right:5px;">beenhere</mat-icon>
        <span *ngIf="isExpanded">Clients</span>
      </a>

      <a class="nav-item nav-link" mat-list-item routerLink="/private/applications" routerLinkActive="active">
        <mat-icon style="padding-right:5px;">apps</mat-icon>
        <span *ngIf="isExpanded">Apps</span>
      </a>

      <a class="nav-item nav-link" mat-list-item routerLink="/private/calendar" routerLinkActive="active">
        <mat-icon style="padding-right:5px;">calendar_today</mat-icon>
        <span *ngIf="isExpanded">Calendar</span>
      </a>
</mat-nav-list>
        <div class="sidenav-bottom">
          <mat-nav-list>
            <a class="nav-item nav-link" mat-list-item (click)="onSidenavToggle()">
              <mat-icon *ngIf="isExpanded">arrow_back_ios</mat-icon>
              <mat-icon *ngIf="!isExpanded">arrow_forward_ios</mat-icon>
              <span *ngIf="isExpanded">Hide</span>
            </a>
          </mat-nav-list>
        </div>
    </mat-drawer>
<mat-drawer-content>
Page content
</mat-drawer-content>
</mat-drawer-container>

app.component.ts

import {Component, HostListener, Inject, OnInit} from '@angular/core';
import { Router } from '@angular/router';
import {Subject} from 'rxjs';

@Component({
  selector: 'app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})

export class AppComponent  {

  isExpanded = true;
  constructor(
  private sidenavService: SidebarService) {
  this.sidenavService.setHideSidebar(this.sidenavService.isHideSidebar());
  }
  onSidenavToggle() {
    this.isExpanded = !this.isExpanded;
    this.sidenavService.setHideSidebar(!this.sidenavService.isHideSidebar());
    this.sidenavService.sideBarState$.next(this.isExpanded);
  }}

sidebar.service.ts

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';


@Injectable()
export class SidebarService {

  public sideBarState$: Subject<boolean> = new Subject<boolean>();

  constructor() {
    const initialValue = localStorage.getItem('isExpanded');
    this.sideBarState$.next(initialValue === 'close');
  }

  getHideSidebar(): Subject<boolean> {
    return this.sideBarState$;
  }

  setHideSidebar(newValue: boolean): void {
    localStorage.setItem('isExpanded', newValue ? 'close' : 'open');
    this.sideBarState$.next(newValue);
  }

  isHideSidebar(): boolean {
    return localStorage.getItem('isExpanded') === 'close';
  }

}

Answer 1

原來問題出在組件中的isExpanded上。 該值被硬編碼為true ，與服務（或存儲在 LOCALSTORAGE 中的值）無關。

其他一些建議是單獨使用Subject值作為isExpanded應該是什么的一個真正來源（使用 EMIT 值，不要自己設置）。 如果您將isExpanded存儲為 true 或 false 而不是open或close ，它也會更有意義。 變量名稱建議該值為真或假。

import {Component, HostListener, Inject, OnInit} from '@angular/core';
import { Router } from '@angular/router';
import {Subject} from 'rxjs';

@Component({
  selector: 'app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})

export class AppComponent  {

  isExpanded;
  constructor(
  private sidenavService: SidebarService) {
  isExpanded = !this.sidenavService.isHideSidebar();
  }
  onSidenavToggle() {
    this.isExpanded = !this.isExpanded;
    this.sidenavService.setHideSidebar(!this.sidenavService.isHideSidebar());
    this.sidenavService.sideBarState$.next(this.isExpanded);
  }}