如何在 angular.. 中保持页面刷新中的选定选项卡？

Question

我有两个选项卡，一个是集群列表和模板列表。在模板列表中编辑了一些内容后，我想返回到相同的选定模板列表。但它会进入集群列表。我试过这条线，但在更新模板列表后，它把我带到了集群列表。感谢您对此的帮助。

Answer 1

您可以在更新表单并使用 History API 返回列表后将数据设置到路由中。如果你的angular版本 >=7.2 就可以保存数据状态。

否则您可以使用以下方法将数据保存到 localStorage/sessionStorage

在 saving/Updating 数据之后，您可以在重定向回项目列表页面之前调用此方法

 saveTabState(){
    const route = window.location.href;
    if(route.includes('templateform'))
    {
      localStorage.setItem('activeTabTemplate','true');
    }
    
  }

在项目列表页面

if(localStorage.getItem('activeTabTemplate')){
      this.activeTabTemplate = true;
      localStorage.removeItem('activeTabTemplate')
    }

在模板中

// for tab1:
[ngClass]="!activeTabTemplate ? 'active' : ''"

// tab2:
[ngClass]="activeTabTemplate ? 'active' : ''"

如何在 angular.. 中保持页面刷新中的选定选项卡？

How can i keep selected tab on page refresh in angular..?

tabs

angular-ui-bootstrap

angular