Angular 垫显示以前选择的选项卡

Question

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

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

谢谢。

enter image description here

有人知道如何在 angular 中实现吗？ .

#导航到其他页面的代码 - 组件 A

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

#返回导航的代码 - 组件 B

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

#code 用于检查组件 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

#My 选项卡 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>

Answer 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

Angular 垫显示以前选择的选项卡

Angular mat show previously selected tab

javascript

typescript

angular-material

angular