J'ai un problème avec le tapis-tiroir dans Angular Material. Je souhaite enregistrer mon état dans un stockage local, mais le tiroir à tapis est toujours ouvert.

Sidenav a une partie agrandie et une partie agrandie fermée lorsqu'il reste des icônes de tapis sans texte. Lorsque vous cliquez sur le bouton du bas Masquer, le sidenav est Fermer mais après l'actualisation de la page, Sidenav est à nouveau étendu (mais dans le localstorage il est fermé).

Semble à ceci :

Tiroir à tapis déployé ouvert

Tiroir à tapis fermé

Sidenav est ouvert mais dans le stockage local est fermé

Savez-vous comment résoudre ce problème ? Merci!

Code source:

App.component.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';
  }

}
0
BeauNut 3 nov. 2020 à 17:42

1 réponse

Meilleure réponse

Il s'avère que le problème vient de votre isExpanded dans le composant. La valeur est codée en dur sur true et n'a rien à voir avec le service (ou la valeur stockée dans LOCALSTORAGE).

D'autres suggestions consistent à utiliser la valeur Subject seule comme seule véritable source de ce que isExpanded devrait être (utilisez la valeur EMIT, ne la configurez pas vous-même). Il serait également plus logique de stocker isExpanded comme vrai ou faux, au lieu de open ou close. Le nom de la variable suggère que la valeur est vraie ou fausse.

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);
  }}
0
Talha Azhar 3 nov. 2020 à 15:10