页面刷新时如何记住或保留当前标签？

Posted 2023-03-13

【中文标题】页面刷新时如何记住或保留当前标签？

【英文标题】：How to remember or keep the current tab when the page is refreshed?

【发布时间】：2022-01-01 20:53:59

【问题描述】：

我们如何在页面刷新时保留当前标签？我有一个组件是 TransactionsDetailsComponent ，它呈现选项卡，我希望在刷新页面时它应该保留当前选定的选项卡。

如果有人感兴趣，我已将我的 html 和 TS 代码放在下面。

知道如何在 angular 中实现这一点吗？谢谢。

#html代码

<div headerTabs>
            <div style="margin-top: -49px;">
                <mat-tab-group animationDuration="0ms" [(selectedIndex)]="transactionTabIndex"
                    (selectedTabChange)="setTransactionTabIndex($event)">
                    <mat-tab label="tab" *ngFor="let tab of tabs">
                        <ng-template matTabContent>
                            <div class="mat-tab-shadow-container">
                                <div class="mat-tab-shadow"></div>
                            </div>
                            <div class="tab-content">
                                <app-transaction-overview *ngIf="tab === 'Overview' && transaction != null" [transaction]="transaction"
                                    (teamAndUsers)="teamAndUsersEvent($event)" #transactionOverView
                                    (saveTransactionEvent)="saveTransactionEvent($event)"></app-transaction-overview>
                                <app-deals-transaction *ngIf="tab === 'Deals' && transaction != null" [transaction]="transaction">
                                </app-deals-transaction>
                                <app-transaction-activity *ngIf="tab === 'Activity' && transaction != null" [transactionId]="transactionId" [isLocked]="transaction.isLocked">
                                </app-transaction-activity>
                                <app-document-management-list #DocumentManagementList *ngIf="tab === 'Documents' && transaction != null"
                                    [dto]="transaction" [documentType]="documentType" [isLocked]="transaction.isLocked"></app-document-management-list>
                            </div>
                        </ng-template>
                    </mat-tab>
                </mat-tab-group>
            </div>
        </div>
    </app-page-header>
</div>

#tscode

export class TransactionsDetailsComponent implements OnInit 
  documentType = EnumDocumentManagementType.TRANSACTION;
  selectedIndex = 0;
  transactionId: number;
  propertyId: string;
  @ViewChild('transactionOverView') transactionOverView: any;
  isInProgress = false;
  isEdit = false;
  accountId: number;
  accountRole: string;
  tabs = ['Overview', 'Documents', 'Deals', 'Activity'];
  transaction: any = null;
  partialTransaction: any = null;
  transactionTabIndex: number = 0;
  /*page header component Inputs*/
  // pageHeaderTitleData = 
  //   title: 
  //     primary: null
  //   
  // 

  pageHeaderTitleData = 
    title: 
      main: "",
      sub: ""
    ,
    status: 
      text: 'in progress',
    ,
    otherInfo: []
  

  breadCrumbsData = 
    paths: [
      
        text: "My Transactions",
        link: "/transactions"
      
    ],
    currentPage: ''
  

  constructor(
    private _notificationService: NotificationService,
    private formBuilder: FormBuilder,
    private _activatedRoute: ActivatedRoute,
    private _transactionService: TransactionsService,



  ngOnInit(): void 
    this._activatedRoute.queryParams
      .subscribe(
        params => 
          if (params.tab) 
            this.transactionTabIndex = params.tab;
          
        
      )
    


  setTransactionTabIndex(e: any) 
    this.setIsEdit(false);
    this.transactionTabIndex = e.index;    
  

【问题讨论】：

你可以使用 SessionStorage，但我喜欢使用历史状态，因为这甚至考虑了后退和前进按钮..

@Keith，你有例子吗？

SessionStorage 可能是最容易开始的。所以我会看看这个 -> developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage 使用 angular 实现应该不难。

这能回答你的问题吗？ Keep track of which tab was being viewed when page is refreshed

【参考方案1】：

您可以为此目的使用 localStorage，它会在多个会话中持续存在，直到 localStorage 被清除。

更改 setTransactionTabIndex 以将选择存储到 localStorage

setTransactionTabIndex(e: any) 
    this.setIsEdit(false);
    this.transactionTabIndex = e.index;
    localStorage.setItem('transactionTabIndex', e.index);
  

然后在ngOnInit中，检查是否在localStorage中设置了transactionTabIndex并设置：

ngOnInit(): void 
    this._activatedRoute.queryParams
      .subscribe(
        params => 
          if (params.tab) 
            this.transactionTabIndex = params.tab;
          
        
      );
      this.transactionTabIndex = +localStorage.getItem('transactionTabIndex') || 0