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

Question

我们如何在页面刷新时保留当前标签？我有一个组件是 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;    
  }

}

Answer 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
  }