Question

我有一个基本的Ionic3 Tabbed应用程序。

标签页有3个标签，每个标签都指向一个页面。

>>Tabs Page
  >> Home Page  >> Home1Page
  >> About page
  >> Contact Page

我正在使用 超级标签 代替离子标签。当我单击主页上的按钮时，它将带我到另一个页面“ Home1Page”。

当我在Home1Page上时，标签栏需要可见。我正在使用this.navCtrl.setRoot（Home1Page）从主页导航到Home1Page，因为我不希望后退按钮从Home1Page返回到HomePage。因此，基本上Home1Page应该保留在标签导航中。

我要寻找的行为是这样的：我希望当我在Home1Page上时，如果点击选项卡栏中的“主页”选项卡，则应该进入主页页面。

文件如下：

tabs.html

<super-tabs tabsPlacement="bottom" selectedTabIndex = "1" (tabSelect)="OnTabSelect($event)">
  <super-tab [root]="tab1Root" title="Home" icon="home"></super-tab>
  <super-tab [root]="tab2Root" title="About" icon="information-circle"></super-tab>
  <super-tab [root]="tab3Root" title="Contact" icon="contacts"></super-tab>
</super-tabs>

tabs.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { AboutPage } from '../about/about';
import { ContactPage } from '../contact/contact';
import { HomePage } from '../home/home';

@Component({
  templateUrl: 'tabs.html'
})
export class TabsPage {

  tab1Root = HomePage;
  tab2Root = AboutPage;
  tab3Root = ContactPage;

  constructor(public navCtrl : NavController) {  }

  OnTabSelect(tab: any) {

  }
}

home.html

<ion-header>
  <ion-navbar>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <h2>Welcome to Ionic!</h2>

  <button ion-button (click)="callHome1()">Go To Home1</button>

</ion-content>

home.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Home1Page } from '../home1/home1';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})

export class HomePage {

  pageToPush: any = Home1Page;
  constructor(public navCtrl: NavController) {}

  callHome1() {
    this.navCtrl.setRoot(Home1Page,{ msg: "I was pushed by Home. Go back!" });
  }

}

home1.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';

@IonicPage()
@Component({
  selector: 'page-home1',
  templateUrl: 'home1.html',
})
export class Home1Page {

  message: any;

  constructor(public navCtrl: NavController, public navParams: NavParams) {
    this.message = this.navParams.get('msg');
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad Home1Page');
  }
}

home1.html

<ion-header>

  <ion-navbar>
    <ion-title>home1</ion-title>
  </ion-navbar>
</ion-header>


<ion-content padding>
  <h4>{{message}}</h4>
</ion-content>

从外部页面到选项卡页面的Ionic 3超级选项卡导航

0 个答案: