通过函数调用更改离子2应用程序中显示的选项卡

时间:2016-09-13 14:00:18

标签: angular typescript ionic2

我有一个基于tab的离子2打字稿应用程序。

我想更改启动应用时显示的默认标签,具体取决于用户是否已登录。

我尝试使用的代码给出了_this.tabRef is undefined我的app.ts文件的错误,如下所示:



import {Component, ViewChild} from '@angular/core';
import {Platform, ionicBootstrap, NavController, Tabs} from 'ionic-angular';
import {Http, Headers, RequestOptions, HTTP_PROVIDERS, XSRFStrategy, CookieXSRFStrategy} from '@angular/http';
import {StatusBar} from 'ionic-native';
import {HomePage} from './pages/home/home';
import {LoginPage} from './pages/login/login';
import {TabsPage} from './pages/tabs/tabs';
import {DjangoAuth} from './providers/djangoAuth';
import {API_ENDPOINT} from '../app_settings';
import {AUTH_ENDPOINT} from '../app_settings';

@Component({
  template: '<ion-nav [root]="rootPage"></ion-nav>'
})
export class MyApp {
  rootPage: any = HomePage;

  @ViewChild('twipTabs') tabRef: Tabs;

  constructor(public platform: Platform, public djangoAuth: DjangoAuth) {

    this.rootPage = TabsPage;

    platform.ready().then(() => {

      StatusBar.styleDefault();

      djangoAuth.initialize(AUTH_ENDPOINT, false);

      // Check if user is logged in
      djangoAuth.authenticationStatus()
        .then((data:any) => {
            alert('You are logged in');
            // Select the photo upload tab
            this.tabRef.select(2);
          },
          (err:any)=>{
            alert('You are not logged in');
            // Select the login tab
            this.tabRef.select(1);
          });
    });
  }
}

ionicBootstrap(MyApp, [HTTP_PROVIDERS,
  DjangoAuth,
  Tabs,
  {provide:XSRFStrategy, useValue: new CookieXSRFStrategy('csrftoken', 'X-CSRFToken')}]);
&#13;
&#13;
&#13;

我的tabs.html看起来像这样:

&#13;
&#13;
<ion-tabs #twipTabs>
  <ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="Login" tabIcon="information-circle"></ion-tab>
  <ion-tab [root]="tab3Root" tabTitle="Submit" tabIcon="contacts"></ion-tab>
</ion-tabs>
&#13;
&#13;
&#13;

我的tabs.ts看起来像这样:

&#13;
&#13;
import {Component, ViewChild, Injectable} from '@angular/core';
import {Tabs} from 'ionic-angular';
import {HomePage} from '../home/home';
import {PhotoPage} from '../photo/photo';
import {LoginPage} from '../login/login';
import {ResetPasswordPage} from '../reset-password/reset-password';

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

  @ViewChild('twipTabs') tabRef: Tabs;

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

  constructor() {
    this.tab1Root = HomePage;
    this.tab2Root = LoginPage;
    this.tab3Root = PhotoPage;
  }

}
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:1)

您可以在选项卡上使用selectedIndex而不是视图子项。这将为您节省获得参考的麻烦

from BrickPi import *

BrickPiSetup()
BrickPi.MotorEnable[PORT_A] = 1
BrickPi.SensorType[PORT_4] = TYPE_SENSOR_TOUCH

BrickPiSetupSensors()

def sensorValue():
    result = BrickPiUpdateValues()
    if not result :
        print BrickPi.Sensor[PORT_4]
    time.sleep(.01)
    if BrickPi.Sensor[PORT_4] == 0:

def programBody():

    print ("program rest/pause")
    BrickPi.MotorSpeed[PORT_A] = 0
    BrickPiUpdateValues()
    time.sleep(3) 

    print ("reminder/alarm = 200 value")
    BrickPi.MotorSpeed[PORT_A] = 200
    ot = time.time()
    while(time.time() - ot <3):
        BrickPiUpdateValues()
        time.sleep(.01)

    print ("reminder/alarm = 125 value")
    BrickPi.MotorSpeed[PORT_A] = 125
    ot = time.time()
    while(time.time() - ot <3):
        BrickPiUpdateValues()
        time.sleep(.01)

sensorValue()  #I would put while True: here but...

if BrickPi.Sensor[PORT_4]:
    print "program successfully initiatied"
    programBody()

有关其组件页面的更多信息 http://ionicframework.com/docs/v2/api/components/tabs/Tabs/