web-dev-qa-db-ja.com

ionic 2でタブを選択する方法は？

サイドメニューとタブナビゲーションの両方を使用するIonic2で基本的なアプリケーションを作成するのに苦労しています。ナビゲーションスタックの概念を理解し、各タブに独自のナビゲーションスタックがあることを理解していますが、タブ自体の制御を把握できません。

タブスターターテンプレートは、_ion-nav_がTabsPageクラスを指す__root（SOMECODE）__のプロパティであるルートページを持つ1つの_@App_でプロジェクトを初期化します。

_<ion-nav id="nav" [root]="rootPage" #content></ion-nav>
_

TabsPageクラスは、各ページに1つずつ、それぞれのクラスを指す3つのプロパティを定義します（各クラスは_@Page_で装飾されています）。しかし、TabsPageクラス自体には機能がないか、タブコントローラが挿入されているようです。Tabsインスタンスを取得する方法に関するドキュメントはほとんどありません（参照されているインスタンスメソッドがあります http://ionicframework.com/docs/v2/api/components/tabs/Tabs/ ）

私がどうにかして：1つのタブを使用して、他のタブを制御します。

_import {Page, Tabs} from 'ionic-angular';

@Page({
    templateUrl: 'build/pages/timeline/timeline.html'
})
export class Timeline {
    tabs:Tabs;
    constructor(tabs:Tabs) {
        this.tabs=tabs;
        this.selectTab(2);
    }
    selectTab(i:number) {
        this.tabs.select(i);
    }
}
_

上記のページには、NavControllerから継承するTabsインスタンスが挿入されています。 Tabsインスタンスには必要なselectメソッドがあり、別のタブを（名前ではなくインデックスで）指すことができます。したがって、この状況では、「タイムライン」タブを選択するとコンストラクターがトリガーされ、タイムラインタブに移動する代わりに、2番目のタブを選択することになります。

私がやりたいこと：サイドメニューにリンクのあるタブに移動します。私のサイドメニューは、2つのイオン項目、クリックリスナー付きのシンプルなボタンで構成されています。 Ionic 1.xでは、ui-srefまたはhrefを使用して特定の状態に一致させることができますが、Ionic 2では、タブを制御します。IDを指定してapp.getComponent('nav')を使用することで_ion-nav_にアクセスできますが、この方法でイオンタブをターゲットに設定することはできません（タブコントローラにバインドされることを期待しています）インスタンス）。

ionic2
14
Thomas Withaar

各イオンタブは、NavControllerの宣言コンポーネントです。基本的に、各タブはNavControllerです。ナビゲーションコントローラーの使用の詳細については、NavController APIドキュメントをご覧ください。

したがって、特定のタブページ（コンポーネント）内からタブの配列にアクセスするには、次のように簡単にターゲットパスを設定できます。

NavController.parent

ここで、タブの1つの子ページにいるとします。コンポーネントクラスは次のようになります。

import { Component } from '@angular/core';
import { NavController, Nav , Tabs } from 'ionic-angular';

// import Tabs

import { Page2} from '../page-2/page-2';
import { Page3} from '../page-3/page-3';

@Component({
  templateUrl: 'build/pages/page-1/page1.html'
})
export class Page1 {
  tab:Tabs;

  // create a class variable to store the reference of the tabs


  constructor(public navCtrl: NavController, private nav: Nav) {
    this.tab = this.navCtrl.parent;

    /*Since Tabs are declarative component of the NavController 
      - it is accessible from within a child component. 
      this.tab - actually stores an array of all the tabs defined 
      in the tab.html / tab component.
   */
  }

  goToTab2 (){  
    this.tab.select(1);

  //  the above line is self explanatory. We are just calling the select() method of the tab
  }
  goToTab3 (){
    this.tab.select(2);
  }
}

お役に立てれば。

14
Arup Bhattacharya

私はこれを次のようにして動作させます：

app.ts

import {App, IonicApp, Platform} from 'ionic-angular';

@App({
  template: '<ion-nav id="nav" [root]="rootPage"></ion-nav>',
})

export class TestApp {
  rootPage: any = TabsPage;
  constructor(
    private platform: Platform,
    private app: IonicApp
    ) {
    this.initializeApp();
  }

  initializeApp() {
    this.platform.ready().then(() => {
    });
  }
}

tabs.html

        <ion-menu [content]="content">
          <ion-toolbar>
            <ion-title>Menu</ion-title>
          </ion-toolbar>
          <ion-content>
            <ion-list>
              <ion-item (click)="openPage(p)" *ngFor="#p of pages;>
                <span>{{p.title}}</span>
              </ion-item>
            </ion-list>
          </ion-content>
        </ion-menu>
        <ion-tabs id="navTabs" #content swipe-back-enabled="false">
          <ion-tab [root]="tab1"></ion-tab>
          <ion-tab [root]="tab2"></ion-tab>
          <ion-tab [root]="tab3"></ion-tab>
        </ion-tabs>

tabs.ts

    import {Page, NavController, MenuController} from 'ionic-angular';
    @Page({
      templateUrl: 'build/pages/tabs/tabs.html'
    })

    export class TabsPage {

      pages: Array<{ title: string, component: any }>;
      tab1: any = Tab1;
      tab2: any = Tab2;
      tab3: any = Tab3;
      page: any = Page;


      constructor(private nav: NavController,
                  private menu: MenuController) {
        this.tab1 = Tab1;
        this.tab2 = Tab2;
        this.tab3 = Tab3;
        this.pages = [
              { title: 'page-menu', component: Page }
        ];
      }
      openPage(page) {
        // close the menu when clicking a link from the menu
        this.menu.close();
        // navigate to the new page if it is not the current page
      }
    }
3
Baart

私の解決策：

tabs.html：ここでの主なヒントは、＃tabsを使用することです

<ion-tabs tabs-only tabsLayout="icon-start" color="light" #tabs>
  <ion-tab [root]="tabPage1" tabTitle="Mapa" tabIcon="qi-location arrow">
</ion-tab>
<ion-tab [root]="tabPage2" tabTitle="Em Andamento" tabIcon="qi-th-list" tabBadgeStyle="danger"> </ion-tab>
</ion-tabs>

tabs.ts：@ViewChildを使用して、tabs.htmlで使用されるワイルドカードをバインドします

@Component({
  selector: 'page-tabs',
  templateUrl: 'tabs.html',
})
export class TabsPage {

  @ViewChild('tabs') tabRef: Tabs;

  tabPage1: any = HomePage;
  tabPage2: any = InProgressPage;

  constructor() {
  }

  switchToHomePage(){
    this.tabRef.select(0);
  }

  switchToInProgressPage(){
    this.tabRef.select(1);
  }
}

リダイレクトする別のページ：@Inject（forwardRef（（）=> TabsPage））を使用して、親ページのメソッドにアクセスします。

export class AnotherPage {

    constructor(@Inject(forwardRef(() => TabsPage)) private tabsPage:TabsPage){}

    switchToHome(){
      this.tabsPage.switchToHomePage();
    }
}
1
Rodrigo Sene