Angular 2+ 在我重新加载页面后，“选定”选项卡保持选中状态

Question

我希望所选选项卡在重新加载页面后保持选中状态，但这不会发生。

在第一张图片中，我位于第二个选项卡中，该选项卡在 URL 和导航栏中显示自身，这是在刷新页面之前。

在第二张图片中，我重新加载页面，URL 相同，但选项卡显示消失了。

我尝试过的事情：

• 我尝试在

  clickSpecificTab

  功能中进行单击，如您所见，但它不起作用，并且重新加载页面时没有选项卡显示，除非我单击它们。
• 我还尝试在每个开关案例的

  .active

  功能中手动将

  <a>

  类添加到

  clickSpecificTab

  标签中，该类已添加到标签中，但除非单击它们，否则我不会显示选项卡。

这是我的html：

<ul class="nav nav-pills dashboard-tabs" role="tablist">
          <li class="nav-item me-2">
            <a #homeTabRef  (click)="onTabChange(1)" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }" data-bs-toggle="tab" data-bs-target="#home" role="tab">Home</a>
          </li>
          <li class="nav-item me-2">
            <a #geologyTabRef (click)="onTabChange(2)" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }" data-bs-toggle="tab" data-bs-target="#geology"
              role="tab">Geology</a>
          </li>
          <li class="nav-item me-2">
            <a #drillingTabRef (click)="onTabChange(3)" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }" data-bs-toggle="tab" data-bs-target="#drilling"
              role="tab">Drilling</a>
          </li>
          <li class="nav-item me-2">
            <a #mudTabRef (click)="onTabChange(4)" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }" data-bs-toggle="tab" data-bs-target="#mud" role="tab">Mud</a>
          </li>
          <li class="nav-item me-2">
            <a #settingsTabRef (click)="onTabChange(5)" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }" data-bs-toggle="tab" data-bs-target="#settings"
              role="tab">Settings</a>
          </li>
         
        </ul>

这是我的打字稿：

import { AuthService } from '@app/core/services/auth.service';
import { AfterViewInit, Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { UnitService } from '@app/shared/services/unit.service';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { TabsEnum } from '@app/shared/enums/TabEnum';
import { brandSet } from '@coreui/icons';

@Component({
  selector: 'app-header-dashboard',
  templateUrl: './header-dashboard.component.html',
  styleUrls: ['./header-dashboard.component.css']
})
export class HeaderDashboardComponent implements OnInit, AfterViewInit{
  @ViewChild('homeTabRef') homeTab: ElementRef<HTMLElement>;
  @ViewChild('geologyTabRef') geologyTab: ElementRef<HTMLElement>;
  @ViewChild('drillingTabRef') drillingTab: ElementRef<HTMLElement>;
  @ViewChild('mudTabRef') mudTab: ElementRef<HTMLElement>;
  @ViewChild('settingsTabRef') settingsTab: ElementRef<HTMLElement>;

  activeTab: number = 1;
  @Input() sidebarId: string = "sidebar";
  public newMessages = new Array(4)
  public newTasks = new Array(5)
  public newNotifications = new Array(5)
  constructor(private router: Router,
    private authService: AuthService,
    private activatedRoute: ActivatedRoute
  ) { }

  ngOnInit(): void {
    const storedActiveTab = sessionStorage.getItem('activeTab');
    if (storedActiveTab) {
      this.activeTab = parseInt(storedActiveTab, 10);
      this.clickSpecificTab(this.activeTab);
    } else {
      this.activeTab = 1; 
      sessionStorage.setItem('activeTab', this.activeTab.toString());
    }
  }

  ngAfterViewInit(): void {
   
  }
  

  onTabChange(tab: TabsEnum){
    this.activeTab = tab;
    this.setRouterTotabIndex();
  }

  setRouterTotabIndex(){
    sessionStorage.setItem('activeTab', this.activeTab.toString());
    this.router.navigate([], {
      relativeTo: this.activatedRoute,
      queryParams: {
        activeTab: this.activeTab
      },
      queryParamsHandling: 'merge',
      skipLocationChange: false
    });
  }

  onClickLockAccount() {
    sessionStorage.clear();
    this.authService.logout();
  }

  
  clickSpecificTab(activeTab: number) {
    console.log(activeTab);
      switch (activeTab) {
       case 1:
        {
    
         this.homeTab.nativeElement.click();
         break;
        }
       case 2: {
        this.geologyTab.nativeElement.click();
        break;
       }
       case 3: {
        this.drillingTab.nativeElement.click();
        break;
       }
       case 4: {
        this.mudTab.nativeElement.click();
        break;
       }
       case 5: {
        this.settingsTab.nativeElement.click();
        break;
       }
    
       default:
        break;
      }
     }

}

Answer 1

与其尝试以编程方式单击按钮，为什么不直接调用单击期间发生的方法。

  ngOnInit(): void {
    const storedActiveTab = sessionStorage.getItem('activeTab');
    if (storedActiveTab) {
      this.activeTab = parseInt(storedActiveTab, 10);
      this.onTabChange(this.activeTab);
    } else {
      this.activeTab = 1; 
      sessionStorage.setItem('activeTab', this.activeTab.toString());
    }
  }

如果上述建议不起作用，请首先确保正确获取会话存储属性，如果您仍然遇到问题，请分享一个 stackblitz 并复制问题。