单击仪表板时如何更改 ionic 选项卡根页面?
这是我的 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);
}
}
这是我的家.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 单击仪表板时,它会将选项卡根目录更改为仪表板页面并选择仪表板。如果按训练,它将更改为训练页面,并将选项卡根更改为训练页面并选择。
最佳答案
是的,你可以在 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);
关于javascript - 我可以动态更改 ionic 选项卡根目录吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48586510/