动态设置tab不起作用

来源：8-3 开发工具更新、bundle.js 以及 Xcode 环境须知

Ridzhang

2016-08-16

TabsPage代码:

import {Component} from '@angular/core';

import {HomePage} from '../home/home';

import {AboutPage} from '../about/about';

import {ContactPage} from '../contact/contact';

import {Tabs} from 'inoic-angular';

import {Injectable,ViewChild} from '@angular/core';

@Component({

templateUrl: 'build/pages/tabs/tabs.html'

})

export class TabsPage {

@ViewChild('myTabs') tabRef: Tabs;

private tab1Root: any;

private tab2Root: any;

private tab3Root: any;

constructor() {

console.info("222");

// this tells the tabs component which Pages

// should be each tab's root Page

this.tab1Root = HomePage;

this.tab2Root = AboutPage;

this.tab3Root = ContactPage;

}

ionViewLoaded(){

console.info("000");

}

ionViewWillEnter(){

console.info("111");

}

ionViewDidEnter(){

//在进入完成之后,动态选择某一个tab

console.info("Enter!!!");

this.tabRef.select(2);

}

TabsHtml代码:

<ion-tabs #myTabs>

<ion-tab [root]="tab1Root" tabTitle="Home" tabBadge="3" tabBadgeStyle="danger" tabIcon="home"></ion-tab>

<ion-tab [root]="tab2Root" tabTitle="About" tabIcon="information-circle"></ion-tab>

<ion-tab [root]="tab3Root" tabTitle="Contact" tabIcon="contacts"></ion-tab>

</ion-tabs>

写回答

1回答

乐只君子

2016-08-21

没看出来那有错，下边是我的。html里我命名的是 #mainTabs 你复制尝试的时候注意下

import {Component, ViewChild} from '@angular/core';
import {Tabs, App} from 'ionic-angular';

import {HomePage} from '../home/home';
import {SendEnvPage} from '../sendEnv/sendEnv';
import {UserPage} from '../user/user';


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

  @ViewChild('mainTabs') tabRef: Tabs;

  private tab1Root: any;
  private tab2Root: any;
  private tab3Root: any;

  constructor() {
    // this tells the tabs component which Pages
    // should be each tab's root Page
    this.tab1Root = HomePage;
    this.tab2Root = SendEnvPage;
    this.tab3Root = UserPage;
  }

  ionViewDidEnter() {
    this.tabRef.select(2);
  }

}

乐只君子

我的ionic版本是beta.37

2016-08-21

共1条回复

Ionic飞速上手的跨平台App开发

以HTML5移动App开发框架Ionic，开发不受平台限制的App

1314 学习 · 640 问题

查看课程

相似问题

Toast的cssClass怎么设置？自己写了好像都不work

回答 3

动态选定tab未生效