ionic2
탭 사용하기
수색…
비고
최신 변경 사항 및 업데이트를 확인하려면 항상 Ionic 2 Tab 문서 를 확인하십시오.
하위 페이지에서 프로그래밍 방식으로 선택된 탭 변경
이 작업 에서 전체 코드를 살펴볼 수 있습니다.
이 예에서는 공유 서비스를 사용하여 탭 (하위 페이지) 내의 페이지와 탭 컨테이너 (탭을 보유하는 구성 요소) 간의 통신을 처리합니다. 이벤트 로 이해할 수는 있지만 이해하기 쉽고 응용 프로그램이 커지기 시작하기 때 문에 공유 서비스 방식을 좋아합니다.
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);