이온 탭이 올바르게 표시되지 않습니다.

Question

저는 Ionic2를 사용하고 있으며 클릭 할 때 사용자를 관련 페이지로 보내는 두 가지 선택 사항이있는 탭 메뉴가 필요합니다. 이 내가 무슨 짓을했는지 있습니다 :

tabsexample.html

<ion-content padding> 
<ion-tabs> 
    <ion-tab [root]="tab1Root">First Page Tab</ion-tab> 
    <ion-tab [root]="tab2Root">Second Page Tab</ion-tab> 
</ion-tabs> 
</ion-content> 

내가 생성 상대적 페이지와 tabsexample.ts은 다음과 같이이다 :

import {FirstPage} from '../first-page/first-page'; 
import {SecondPage} from '../second-page/second-page'; 
export class tabsexamplePage { 

    tab1Root = FirstPage; 
    tab2Root = SecondPage; 
    constructor(private navCtrl: NavController) { 

    } 

는 내가 얻을 것은있다 탭 텍스트가없는 흰색 막대 (First Page Tab 및 Second Page Tab). 또한 2 개의 탭이 화면의 전체 너비를 채우므로 두 번째 탭이 첫 번째 탭 아래에 있습니다.

Answer 1

대신 다음과 같이 그 일의 :

<ion-content padding> 
<ion-tabs> 
    <ion-tab [root]="tab1Root">First Page Tab</ion-tab> 
    <ion-tab [root]="tab2Root">Second Page Tab</ion-tab> 
</ion-tabs> 
</ion-content> 

는 그냥 ion-tabs 요소를 포함하지만 ion-content 래퍼없이 :

<ion-tabs> 
    <ion-tab [root]="tab1Root">First Page Tab</ion-tab> 
    <ion-tab [root]="tab2Root">Second Page Tab</ion-tab> 
</ion-tabs>