angular - 你将如何在 Angular/Angular Material 中保存 UI 状态？

Question

当用户点击浏览器后退按钮时，我想设置 Material Expansion Panel/Accordion，Material Tabs 的 UI 状态。

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

示例用例:

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

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

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

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

任何有关您如何解决此问题的建议都会很有帮助。

提前致谢。

Answer 1

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

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 中。