切换页面后保存席子扩展面板状态

Question

示例：

1. 示例页面：我在此页面上打开各种扩展面板。

2. 然后我切换到另一页。

3. 然后我切换回“示例页面”和我拥有的面板以前打开的仍然打开。

任何人都可以大致了解如何做到这一点吗？

Answer 1

您需要在页面导航之间保持某种状态：我想您可以将数据保存在cookie /会话中，使用服务来维护状态数据或使用某种存储/ redux原理（ngrx等） ）

Answer 2

[我认为一个不错的选择是插入一个商店来管理状态，Angular最受欢迎的库是Ngrx Store，您可以在这里找到文档https://github.com/ngrx/store

Answer 3

非常简单，它使用了配置文件服务以及getter和setter。我不确定它的效率如何，但是它确实有效。

1）首先创建服务，创建一个服务，如果您正在使用CLI，最好使用默认值。向数字类型的服务添加属性；

public panelCurrentlyExpanded: number;

2）在您的组件中，将您的服务注入到构造函数中（如果没有任何意义，将其注入Google），然后创建具有相同属性名称（不必是相同的BTW）的getter和setter。

  get panelCurrentlyExpanded(): number {
    if (this.profileSvc.panelCurrentlyExpanded !== undefined ) {
      return this.profileSvc.panelCurrentlyExpanded;
    }
  }
  set panelCurrentlyExpanded(value: number) {
    this.profileSvc.panelCurrentlyExpanded = value;
  }

3）接下来，创建几个方法来设置和检查“ expanded”属性。

  isExpanded(idx: number) {
    if (this.panelCurrentlyExpanded !== undefined) {
      if (idx === this.panelCurrentlyExpanded) {
        return true;
      }
    }
  }

  setExpanded(idx: number): void {
    this.panelCurrentlyExpanded = idx;
  }

4）打开HTML并找到扩展面板。我的面板是动态创建的，因此我有一个ngFor语句。这里的事情是公开面板的索引。

  mat-expansion-panel (opened)="setExpanded(i)"
  [expanded]="isExpanded(i)" *ngFor="let cat of categories let i = index;" 

打开的点击将索引发送到服务进行存储。扩展属性将使用存储的索引检查其索引的值，如果匹配则将其打开。

我确定您有更好的方法。

我希望它能对您有所帮助。