頁面重繪時如何記住或保持當前標簽？

頁面重繪 時如何保持當前標簽頁？我有一個組件，它是 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;    
  }

}

uj5u.com熱心網友回復：

為此，您可以使用 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
  }  

標籤：javascript 有角的 打字稿 角材料

上一篇：帶有輸入欄位的陣列中的角度搜索/過濾專案

下一篇：如何在從另一個函式呼叫函式時進行檢查？