web-dev-qa-db-ja.com

Ionic 2でタブを動的に変更する

タブを使用しているIonicアプリケーションを作成しています。タブテンプレートにアタッチされたTypeScriptコンポーネントクラスを使用して、あるタブから別のタブに移動できるようにしたいと思います。タブ1でイベントをトリガーするとアクティブになります。

タブはタブに適切に読み込まれ、タブをクリックして手動で移動する限り問題はありませんが、コードビハインドでコンテキストを切り替えようとすると非常に注意が必要です。

ロード時には、イオンタブの[selectedIndex]属性をタブコンポーネントクラスの属性の値に設定するだけで、いずれかのタブをアクティブにできます。

タブ親テンプレート-tab.html

_<ion-tabs #tabParent [selectedIndex]="tabToShow">
  <ion-tab tabTitle="Tab 1" [root]="tab2" [rootParams]="{parent : tabParent}"></ion-tab>
  <ion-tab tabTitle="Tab 2" [root]="tab2" [rootParams]="{parent : tabParent}></ion-tab>
  <ion-tab tabTitle="Tab 3" [root]="tab3" [rootParams]="{parent : tabParent}></ion-tab>
</ion-tabs>
_

コンポーネント-tab.ts

_import {Page} from 'ionic-angular';
import {Tab1} from '../tab1/tab1.ts';
import {Tab2} from '../tab2/tab2.ts';
import {Tab3} from '../tab3/tab3.ts';

@Page({
templateUrl : 'build/pages/tab/tab.html'
})

export class Tab{

tab1: any;
tab2: any;
tab3: any;

tabToShow : number = 1;

ngOnInit(){
 this.tab1 = Tab1;
 this.tab2 = Tab2;
 this.tab3 = Tab3;
 }

}
_

最初のタブのコンポーネント（_Tab1_）では、_[rootParams] = "{parent : tabParent}"_を使用して親タブへの参照を取得でき、tabsオブジェクトによって公開されているすべての利用可能なプロパティにアクセスできます。 tab1.htmlテンプレートで生成されたイベントにより、goToTab2()が呼び出されます。そのため、SelectedIndexを1に設定できました（アクティブなタブを2番目のタブに変更する予定です）。しかし、タブは変更されていません。

tab1.ts

_import {Page, NavParams} from 'ionic-angular';
import {Tab2} from '../tab/tab2/tab2.ts'

@Page({
 templateUrl : 'build/pages/tab/tab1/tab1.html'
})

export class Tab1{

parent : any;

constructor(nav : NavParams){
this.parent = nav.data;
}

goToTab2(event, value): void{
 this.parent.parent.selectedIndex = 1;
 console.log(this.parent.parent);
 }

}
_

助けが必要ですが、何が間違っていますか？

ionic2
19
oladejo sola

私は同じ問題を抱えていて、何時間も試してデバッグした後、非常に簡単であることがわかりました：

import {Page, NavController, Tabs} from 'ionic-angular';

@Page({
 templateUrl : 'build/pages/tab/tab1/tab1.html'
})

export class Tab1{
    constructor(private nav: NavController) {
    };
    selectTab(index: number) {
        var t: Tabs = this.nav.parent;
        t.select(index);
    }
}
30
Roy S.
this.nav.parent.select(tabIndex);

tabIndexは0から始まります

11
Jagraj Singh

Ionic 3+の場合、this.navにアクセスできないため、次のような関数を使用できます。

go(tabIndex: number)
{
    this.app.getActiveNavs()[0].parent.select(tabIndex);
}

関数が共通のクラスで定義されている場合（すべてのページにインポートされている場合）、必要なときに呼び出すことができます

<button ion-button (click)="core.go(0);">Go to first tab (#0)</button>
<button ion-button (click)="core.go(1);">Go to second tab (#1)</button>
5
Yvan

サイドメニューからタブ付きページに移動したかった。それを可能にするために、私は次のことをしました。

Tabs.html：

<ion-tabs selectedIndex="{{activeTab}}">
  <ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="Profiles" tabIcon="filing">     </ion-tab>
</ion-tabs>

Tabs.ts

...normal stuff preceding ...
export class TabsPage {
 @ViewChild('page-tabs') tabRef: Tabs;
 activeTab: any;
 tab1Root: any = HomePage;
 tab2Root: any = ProfilesPage;

 constructor(public navCtrl: NavController, public params: NavParams) {
    this.authUser = params.get("authUser");
    this.activeTab = params.get("tab")?params.get("tab"):0;
 }

}

次に、app.component.tsからtabパラメーターを渡しました。

...normal stuff preceding ...
export class MyApp {
 @ViewChild(Nav) nav: Nav;
 isAppInitialized: boolean = false;
 rootPage: any
 pages: Array<{title: string, type: string, index?: number, component?: any}>;

  constructor(
   private platform: Platform,
   public menu: MenuController) {

 }

 ngOnInit() {
    this.platform.ready().then(() => {
     this.pages = [
       {title: 'Home', type: 'tab', index: 0},
       {title: 'Profiles', type: 'tab', index:1},
       {title: 'Create Shares', type: 'page', component: HomePage},
       {title: 'Existing Shares',type: 'page', component: ProfilesPage}
     ];
    });
  }

 openPage(page) {
   this.menu.close();

   if (page.type==='tab') {
     this.nav.setRoot(TabsPage,{tab: page.index});
   } else {
     this.nav.setRoot(page.componenet);
   }
}

}

その後、app.html

 <ion-header>
    <ion-toolbar>
      <ion-title>Left Menu</ion-title>
        <button class="absolute-right" ion-button clear menuClose="left">
          <span ion-text showWhen="ios">Close</span>
          <ion-icon name="md-close" showWhen="Android,windows"></ion-icon>
      </button>
    </ion-toolbar>
  </ion-header>

  <ion-content>
    <ion-list>
      <button ion-item *ngFor="let p of pages" (click)="openPage(p)">
        {{p.title}}
      </button>
    </ion-list>
  </ion-content>
</ion-menu>

そこにある...

5
Eric G

さらに簡単になりました！ selectedIndex属性を追加できます

<ion-tabs selectedIndex="2">
  <ion-tab [root]="tab1Root"></ion-tab>
  <ion-tab [root]="tab2Root"></ion-tab>
  <ion-tab [root]="tab3Root"></ion-tab>
</ion-tabs>
3
Aaron Klaser
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);
  }
}
1
Arup Bhattacharya

Tab1コンポーネント（tab1.ts）で、親コンポーネントTabの注入を試行します。

export class Tab1{
  constructor(@Host() _parent:Tab) {}
  goToTab2(event, value): void{
    this._parent.tabToShow = 1 ;
  }
}
0
Michael Desigaud

_@ViewChild_またはIonicApp.getComponent()を使用して、タブ要素を取得できます。 tabs要素にアクセスすると、tab-buttonにアクセスできます。タブボタンクリックイベントは、_@HostListener_を使用してonClick関数にバインドされます。タブボタンonClickボタンを呼び出すことでタブを切り替えることができます。

_export class TabsPage {
  tab1TabRoot: Type = Tab1Page;
  tab2TabRoot: Type = Tab2Page;
  tab3TabRoot: Type = Tab3Page
  @ViewChild(Tabs) tabs;

  constructor(
    private _ngZone: NgZone,
    private _platform: Platform,
    private _app: IonicApp,
  ) {
  }

  ngOnInit() {
  }

  ngAfterViewInit() {
    console.log(this.tabs);
  }

  public selectTab2() {
    this._ngZone.run(function() {
      tabs._btns._results[0].onClick();
    });
  }
}
_
0
jccf091

NavControllerクラスとそのプロパティ.parent.select（必要なタブの位置）を使用するだけです

constructor(public navCtrl: NavController) {
}
goToTab2(){
    this.navCtrl.parent.select(1);
}
0
Nitish Patil