我怎样才能以角度保持页面刷新上的选定选项卡..？

Question

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

Answer 1

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

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

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

 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' : ''"

Answer 2

@Input({ 变换: numberAttribute }) 选定索引：数字 |空

活动选项卡的索引。

示例： TS：

selectedTabIndex = Number(sessionStorage.getItem('selectedTabIndex') ?? '0');

handleTabChange(event: MatTabChangeEvent): void {
    // Save the current tab index to Storage
    sessionStorage.setItem('selectedTabIndex', event.index.toString());
}

HTML：

文本1 文本2