您将如何在角度/角度材料中保存 UI 状态？

Question

当用户单击浏览器后退按钮时，我想设置材质扩展面板/手风琴、材质选项卡的 UI 状态。

注意：我不想实现 redux 或 ngrx/store。

例如用例：

在当前页面上，我折叠了第二个扩展面板，然后导航到第四个选项卡。如果我单击离开该页面然后单击返回，我希望这些特定组件处于我离开它们的 UI 状态。

从那时起，每次我单击后退或前进到某个点时，如果这些组件存在以按原样设置 UI 状态。

我知道材质扩展面板和材质选项卡 API 允许您设置折叠面板或活动选项卡，这个问题是您在前后导航以设置这些属性时如何记住状态。

你会使用服务吗？我会使用路由器并设置查询参数吗？

您如何解决这个问题的任何建议都会有很大帮助。

提前致谢。

Answer 1

通过使用服务，您可以在应用程序中导航时轻松保存上次状态。当您离开存在选项卡和手风琴的页面时，您可以在 OnDestroy 挂钩上保存状态。同样，当您导航到 ui 组件时，您可以恢复 OnInit 挂钩上的状态。我要做的是创建一个保持该状态的全局服务；

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

@Injectable({providedIn: "root"})
export class UIStateService {
  private state: UIState;

  constructor() {}

  setState(state: UIState) {
    this.state = state;
  }

  getState(): UIState {
    return this.state ? this.state : {tabState: 1, acordionState: 1} /** default state*/;
  }
}

export interface UIState {
  tabState: number;
  acordionState: number;
}

在我的 ui 组件中：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { UIStateService } from "./uistate.service"

@Component({
  selector: 'app-my-ui',
  templateUrl: './my-ui.component.html',
  styleUrls: ['./my-ui.component.css']
})
export class MyUIComponent implements OnInit, OnDestroy {

  constructor(private uiStateService: UIStateService) { }

  ngOnInit() {
    const state = this.uiStateService.getState();
    this.setTabState(state.tabState);
    this.setAcordionState(state.acordionState);
  }

  setTabState(tabId: number) {
    // set active tab based on id tabId
  }

  setAcordionState(acordionId: number) {
    // set active panel based on acordionId
  }

  getCurrentTabState(): number {
    // return active tabid i.e 1
    return 1;
  }

  getCurrentAcordionState(): number {
    // return active acordionId i.e 1
    return 1;
  }

  ngOnDestroy() {
    const currentState = { tabState: this.getCurrentTabState(), acordionState: this.getCurrentAcordionState() }
    this.uiStateService.setState(currentState);
  }
}

只要您的页面不刷新，UIStateService 中的状态就会一直存在。但是，如果您想在页面重新加载之间保持状态，您应该修改 UIStateService 以将状态存储在浏览器的 LocalStorage 中。