时间戳

首页 > 解决方案 > 角垫显示先前选择的选项卡

javascript - 角垫显示先前选择的选项卡

问题描述

例如，我有一个组件 A，我在 Tab Second 上，然后我导航到另一个页面，即组件 B 让我们说第 1 页，然后我导航回组件 A，然后我应该在最后选择的选项卡上此处为第二个选项卡的示例。

因此，当我向后导航时，应该选择我在导航到其他页面之前选择的选项卡，例如在这里我选择了第二个选项卡，然后当我返回时导航到其他页面第二个选项卡应该被选中，因为这是我之前选择的我导航到其他页面。

谢谢。

在此处输入图像描述

任何人都知道如何以角度实现这一点？.

#code 导航到其他页面 - 组件 A

 navigateToPage1() {
    this._router.navigate(['page1']);
  }

#用于向后导航的代码 - 组件 B

 navigateBackToPage() {
        this._router.navigate(['page0']);
      }

#用于检查组件 A 上选定选项卡的代码

 tabChanged(tabChangeEvent: MatTabChangeEvent): void {
    this.currentTab = tabChangeEvent.index;
    if(this.currentTab !== 1) {
      this.pageHeaderTitleData.title.primary = "Users"
      this._pageEventMyList();
    }
    this.pageHeaderTitleData.title.primary = "Teams"
  }

标签截图

#我的标签页html代码组件A

<mat-tab-group #tabGroup (selectedTabChange)="tabChanged($event)">
    <mat-tab label="First">
        ...
    </mat-tab>
    <mat-tab label="Second">
        ...
    </mat-tab>
    <mat-tab label="Third">
        ...
    </mat-tab>
</mat-tab-group>

标签： javascriptangulartypescriptangular-material

解决方案

您可以使用共享服务来存储选定的选项卡。让我们称之为UIStateService：

@Injectable({
  providedIn: 'root'
})
export class UIStateService {
  pageOneSelectedTab = 0;
  pageTwoSelectedTab = 0;
  constructor() {}
}

在您的页面组件中使用它：


  selectedIndex = 0;

  constructor(private uiStateService: UIStateService) { }

  tabChanged(event: MatTabChangeEvent) {
    this.uiStateService.pageOneSelectedTab = event.index;
  }

  ngOnInit() {
    this.selectedIndex = this.uiStateService.pageOneSelectedTab;
  }

在您页面的 HTML 中：

<mat-tab-group [(selectedIndex)]="selectedIndex" (selectedTabChange)="tabChanged($event)">

根据您的代码检查此 Stackblitz 示例：https ://angular-ivy-evbm9h.stackblitz.io

推荐阅读