ionic2
탭 사용하기

비고

하위 페이지에서 프로그래밍 방식으로 선택된 탭 변경

이 작업 에서 전체 코드를 살펴볼 수 있습니다.

이 예에서는 공유 서비스를 사용하여 탭 (하위 페이지) 내의 페이지와 탭 컨테이너 (탭을 보유하는 구성 요소) 간의 통신을 처리합니다. 이벤트 로 이해할 수는 있지만 이해하기 쉽고 응용 프로그램이 커지기 시작하기 때 문에 공유 서비스 방식을 좋아합니다.

TabService

import {Injectable} from '@angular/core';
import {Platform} from 'ionic-angular/index';
import {Observable} from 'rxjs/Observable';
 
@Injectable()
export class TabService { 
  
  private tabChangeObserver: any;
  public tabChange: any;

  constructor(private platform: Platform){
    this.tabChangeObserver = null;
    this.tabChange = Observable.create(observer => {
        this.tabChangeObserver = observer;
    });
  }
  
  public changeTabInContainerPage(index: number) {
    this.tabChangeObserver.next(index);
  }
}

그래서 기본적으로 TabService 는 Observable 을 생성하여 탭 컨테이너가 그것에 가입 할 수있게하고 자식 페이지에서 호출 될 changeTabInContainerPage() 메서드를 선언합니다.

그런 다음 각 하위 페이지 (탭 안의 페이지)에 버튼을 추가하고 click 이벤트를 서비스를 호출하는 메소드에 바인드합니다.

Page1.html

<ion-content class="has-header">
    <h1>Page 1</h1>
    <button secondary (click)="changeTab()">Select next tab</button>
</ion-content>

Page1.ts

import { Component } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { TabService } from 'tabService.ts';

@Component({
  templateUrl:"page1.html"
})
export class Page1 {

  constructor(private tabService: TabService) { }

  public changeTab() {
    this.tabService.changeTabInContainerPage(1);
  }
}

마지막으로 TabsPage 에서 서비스에 가입하기 this.tabRef.select(index); 선택한 탭을 this.tabRef.select(index); 로 this.tabRef.select(index);

import { Component, ViewChild } from "@angular/core";
import { Page1 } from './page1.ts';
import { Page2 } from './page2.ts';
import { TabService } from 'tabService.ts'; 

@Component({
  templateUrl: 'tabs.html'
})
export class TabsPage {
  @ViewChild('myTabs') tabRef: Tabs;

  tab1Root: any = Page1;
  tab2Root: any = Page2;

  constructor(private tabService: TabService){
    this.tabService.tabChange.subscribe((index) => {
      this.tabRef.select(index);
    });
  }
}

ion-tabs 요소에 #myTabs 를 추가하여 Tab 인스턴스에 대한 참조를 #myTabs 으며, @ViewChild('myTabs') tabRef: Tabs; 가있는 구성 요소에서 가져옵니다 @ViewChild('myTabs') tabRef: Tabs;

<ion-tabs #myTabs>
  <ion-tab [root]="tab1Root" tabTitle="Tab 1"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="Tab 2"></ion-tab>
</ion-tabs>

selectedIndex로 탭 변경

DOM에 대한 참조를 얻는 대신 ion-tabs에서 selectedIndex 속성을 사용하여 탭의 색인을 간단히 변경할 수 있습니다

HTML :

 <ion-tabs [selectedIndex]="tabIndex" class="tabs-icon-text" primary >
      <ion-tab tabIcon="list-box"   [root]="tabOne"></ion-tab>
      <ion-tab tabIcon="contacts"  [root]="tabTwo"></ion-tab>
      <ion-tab tabIcon="chatboxes"  [tabBadge]="messagesReceived" [root]="tabFive"></ion-tab> 
 </ion-tabs>

TS :

 import { Events} from "ionic-angular";

 export class tabs {
  public tabIndex: number;
  constructor(e: Events) {
    tabs.mySelectedIndex = navParams.data.tabIndex || 0;
    e.subscribe("tab:change", (newIndex) => this.tabIndex = newIndex);
  }
}

다른 컨트롤러 서비스에서 변경하려는 경우 이벤트를 보낼 수 있습니다.

e.publish("tab:change",2);