ionic2选项卡的getSelected方法提供了先前的选择

Jay*_*thi 4 typescript ionic2 ionic3 angular

以下是我正在处理的代码

onTabsChange(abc) {
   let selected_tab = this.tabs.getSelected();
   let tab_index = selected_tab.index;
   console.log(tab_index);  // should print current tab index but it prints previously selected tab index
}
Run Code Online (Sandbox Code Playgroud)

以下是HTML代码

 <ion-tabs #myTabs class="menu" (ionChange)="onTabsChange()" selectedIndex="0">
   <ion-tab [root]="blank" tabTitle="Blank"></ion-tab>
   <ion-tab [root]="blank" tabTitle="Blank"></ion-tab>
   <ion-tab [root]="blank" tabTitle="Blank"></ion-tab>
   <ion-tab [root]="blank" tabTitle="Blank"></ion-tab>
   <ion-tab [root]="blank" tabTitle="Blank"></ion-tab>
   <ion-tab [root]="blank" tabTitle="Blank"></ion-tab>
   <ion-tab [root]="blank" tabTitle="Blank"></ion-tab>
 </ion-tabs>
Run Code Online (Sandbox Code Playgroud)

现在,如果我单击任何选项卡,this.tabs.getSelected()将为我提供先前选择的选项卡。

如果我想要当前选择的选项卡,我该如何做到这一点。

seb*_*ras 6

现在,如果我单击任何选项卡,this.tabs.getSelected()将为我提供先前选择的选项卡。

getSelected()方法返回选择的选项卡,而不是先前选择的选项卡。事实是索引是从零开始的索引,因此第一个选项卡的索引为0,第二个选项卡的索引为1,依此类推...

<ion-tabs #myTabs (ionChange)="onTabsChange()" selectedIndex="0">
  <ion-tab [root]="tab1Root" tabTitle="TabTitle1"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="tabTitle2"></ion-tab>
</ion-tabs>
Run Code Online (Sandbox Code Playgroud)

然后在您的代码中:

@Component({
  templateUrl: 'tabs.html'
})
export class TabsPage {
  @ViewChild('myTabs') tabRef: Tabs;

  tab1Root: any = Page1;
  tab2Root: any = Page2;

  public onTabsChange() {
    let selectedTab = this.tabRef.getSelected();
    console.log(selectedTab.index + ' - ' + selectedTab.tabTitle);
  }
}
Run Code Online (Sandbox Code Playgroud)