Question

示例：

示例页面：我在此页面上打开各种扩展面板。
然后我切换到另一个页面。
然后我切换回“示例页面”和我拥有的面板以前打开的仍然打开。

任何人都可以大致了解如何完成此操作吗？

Answer 1

我认为一个不错的选择是插入一个Store来管理State，Angular最受欢迎的库是Ngrx Store，您可以在https://github.com/ngrx/store

中找到文档。

Answer 2

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

Answer 3

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

1）首先，创建服务，如果使用的是CLI，最好使用默认设置。在类型为number的服务中添加属性；

public panelCurrentlyExpanded: number;

2）在您的组件中，将服务注入到构造函数中（如果没有什么用，请在Google上输入），然后创建一个具有相同属性名称的getter和setter（不必使用相同的BTW）

  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;"

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

我确定您有更好的方法。

希望它能对您有所帮助。

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

3 个答案: