Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
576 views
in Technique[技术] by (71.8m points)

angular - How to go directly to a Tab

I'm trying to make a homescreen page, where you don't have the tabsmenu and where I want to have some buttons to go straight to some Tab.

I'm using the function this.navCtrl.push(TabsPage);

But this function just go to the the first tab, always, to I have some extra param to go straight to some of my tabs?

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

I'm afraid it's not included in Ionic by default, but you can add it to your app very easily. Please take a look at this working plunker

Like you can see there, we just push the page that contains the tabs, but we send a parameter with the index of the tab that we want to select:

  public openFirstTab(): void {
    this.navCtrl.push(TabsPage);
  }

  public openSecondTab(): void {
    // The second tab is the one with the index = 1
    this.navCtrl.push(TabsPage, { selectedTab: 1 });
  }

Then in the page that contains the tabs, we get the instance of the tabs, and we select the index received as parameter (if any):

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

  private selectedTab: number;

  public tab1Root = FirstTabPage;
  public tab2Root = SecondTabPage;

  constructor(private navParams: NavParams) {
    this.selectedTab = this.navParams.get('selectedTab') || 0;
  }

  ionViewWillEnter() {
    if(this.selectedTab) {
      this.tabRef.select(this.selectedTab);
    }
  }

}

Please notice that in the view you'd need to include the #myTabs template variable to be able to get the instance of the tabs in your component code.

<ion-tabs #myTabs>
  <ion-tab [root]="tab1Root" tabTitle="First Tab"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="Second Tab"></ion-tab>
</ion-tabs>

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

2.1m questions

2.1m answers

60 comments

57.0k users

...