角垫显示先前选择的选项卡答案

【问题标题】：Angular mat show previously selected tab角垫显示先前选择的选项卡
【发布时间】：2021-10-21 00:02:10
【问题描述】：

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

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

谢谢。

有人知道如何以角度实现这一点吗？ .

#code on navigating to other page - 组件 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"
  }

tabs screenshot

#我的标签页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>

【问题讨论】：

标签： javascript angular typescript angular-material

【解决方案1】：

您可以使用共享服务来存储选定的选项卡。我们就叫它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

【讨论】：

已解决。谢谢。