您将如何在 angular / angular 材质中保存 UI 状态？答案

【问题标题】：How would you save UI state in angular / angular material?您将如何在 angular / angular 材质中保存 UI 状态？
【发布时间】：2019-06-13 07:46:10
【问题描述】：

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

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

例如用例：

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

从该点开始，我每次单击后退或前进到某个点，如果存在这些组件来设置 UI 状态。

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

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

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

提前致谢。

【问题讨论】：

一些代码可能会有所帮助。但是您需要将某种状态管理附加到路由器。
@ritaj 我没有代码，但扩展面板和选项卡当前不保持其状态。您能否详细说明将状态附加到路由器的理论？
那些导航链接是路由器链接吗？如果是，您可以使用[routerLinkActive]="what-ever-class-makes-them-look-active"。如果不是，您将在向后/向前导航时丢失状态。事实上，即使是 ngrx 也无法帮助您，因为整个应用程序会在后退/前进浏览器单击时重新启动。您必须将状态保存在存储中...
@ritaj 还没有，您是否可以提供任何示例，您的建议听起来是我想要的。但不知道如何实现。

标签： angular user-interface angular-material

【解决方案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 中。

【讨论】：

感谢您的详细解释和解决方案:-)。