Question

当我点击仪表板时，如何更改离子标签根页？

这是我的Tabs.ts

import { Component } from '@angular/core';
import { DashBoardPage } from '../dash-board/dash-board';
import { TrainingPage } from '../training/training';
import { ArchivePage } from '../archive/archive';
import { HomePage } from '../home/home';
import { DataProvider } from '../../providers/data/data';
import { Observable } from 'rxjs/Observable';



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

  // tabIndex: Observable<[Number]>;

  dashBoard = DashBoardPage;
  training = TrainingPage;
  archive = ArchivePage;
  home = HomePage;
  constructor(public data: DataProvider) {
    // this.tabIndex = this.data.tabIndex;
  }
}

tabs.html

<super-tabs selectedTabIndex="{{ tabIndex }}" indicatorColor="dark" [config]="{ sideMenu: 'left', allowElementScroll: 'true' }" tabsPlacement= "bottom">
  <super-tab [root]="home" id="home"  icon="home"></super-tab>
  <super-tab [root]="dashBoard" id="dashBoard" icon="albums"></super-tab>
  <super-tab [root]="training" id="training" icon="information-circle" ></super-tab>
  <super-tab [root]="archive" id="archive" icon="contacts"></super-tab>
</super-tabs>

这是我的home.ts文件

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, App } from 'ionic-angular';
import { DashBoardPage } from '../dash-board/dash-board';
import { TrainingPage } from '../training/training';
import { ArchivePage } from '../archive/archive';
import { Storage } from '@ionic/storage';
import { TabsPage } from '../tabs/tabs';
import { DataProvider } from '../../providers/data/data';


@IonicPage()
@Component({
  selector: 'page-home',
  templateUrl: 'home.html',
})
export class HomePage {
  token: any;
  isLogIn: boolean;
  tabIndex: number ;
  constructor(public data:DataProvider , public appCtrl: App, public storage: Storage,public navCtrl: NavController, public navParams: NavParams) {
    this.isLogIn = true;
  }



  }

  dashBoard() {
    this.navCtrl.push(DashBoardPage, this.token);
    this.storage.set('tabIndex', 1);

  }

  training() {
    this.navCtrl.push(TrainingPage, this.token);
  }

  archive() {
    this.navCtrl.push(ArchivePage, this.token);
  }


}

这是我的home.html

<ion-header>

    <ion-navbar>
    <ion-toolbar>

          <button item-start class="menu" ion-button="ion-button" icon-only="icon-only" menuToggle>
            <ion-icon style="color: white;" name="menu"></ion-icon>
        </button>
        <!--
        <img item-end style="width: 100px;" src="assets/imgs/ulogo2.png" alt="">
        -->

    </ion-toolbar>


    </ion-navbar>


</ion-header>
<ion-content padding>
  <br> <br>
  <ion-card (click)="dashBoard()" >
      <ion-item>
        <ion-thumbnail item-start>
          <img src="assets/imgs/das.png">
        </ion-thumbnail>
        <h1>DashBoard</h1>
      </ion-item>
  </ion-card>

  <ion-card (click)="training()">
      <ion-item>
        <ion-thumbnail item-start>
          <img src="assets/imgs/training.png">
        </ion-thumbnail>
        <h1>Training</h1>
      </ion-item>
  </ion-card>

  <ion-card (click)="archive()">
    <ion-item>
      <ion-thumbnail item-start>
        <img src="assets/imgs/archive.png">
      </ion-thumbnail>
      <h1>Archive</h1>
    </ion-item>
  </ion-card>

</ion-content>

当我从home.html单击仪表板时，我想更改选项卡根目录，它会将选项卡根目录更改为仪表板页面并选择仪表板。如果按新闻培训，它将更改为培训页面，并将标签根更改为培训页面和选择。

Answer 1

是的，你可以在你的tabs.html

里面

<ion-tabs selectedIndex={{tabIndex}}>

在tabs.ts文件中

export class TabsPage {

  // tabIndex: Observable<[Number]>;

  dashBoard = DashBoardPage;
  training = TrainingPage;
  archive = ArchivePage;
  home = HomePage;
  constructor(public data: DataProvider) {
    this.tabIndex = 1;
  }
}

以其他方式而不是使用this.navCtrl.push(TrainingPage, this.token);使用this.navCtrl.select("1", this.token);

Answer 2

我只能看到这方面的一种方式。通过将根目录设置为您想要的页面。

 dashBoard() {
    this.navCtrl.setRoot(DashBoardPage, this.token);
  }

我可以动态更改离子选项卡根目录吗？

2 个答案: