2017-05-21 22 views
0

のタブを作成:私は、ページ上のこれらのようなタブを作成したいページ

あなたはVoortgangとpijnniveauを見たように、ページ自体に私のタブですが、私は、このようにそれらを設定した場合:

export class ProgressPage {  
    tab1Root = HomePage; 
    tab2Root = SchemaPage; 

と私のHTMLテンプレートに比べて次の操作を行います。

 <ion-header> 
    <ion-navbar color="light"> 
     <ion-title>{{viewTitle}}</ion-title> 
     <ion-buttons end> 
      <button ion-button [disabled]="isToday" (click)="today()">Today</button> 
      <button ion-button (click)="changeMode('month')">M</button> 
      <button ion-button (click)="changeMode('week')">W</button> 
      <!--<button ion-button (click)="changeMode('day')">D</button>--> 
      <button ion-button (click)="loadEvents()">Load Events</button> 
     </ion-buttons> 
    </ion-navbar> 
</ion-header> 

<ion-content class="has-header"> 
    <!--<template #template let-showEventDetail="showEventDetail" let-selectedDate="selectedDate" let-noEventsLabel="noEventsLabel"></template>--> 

    <calendar [eventSource]="eventSource" 
       [calendarMode]="calendar.mode" 
       [currentDate]="calendar.currentDate" 
       (onCurrentDateChanged)="onCurrentDateChanged($event)" 
       (onEventSelected)="onEventSelected($event)" 
       (onTitleChanged)="onViewTitleChanged($event)" 
       (onTimeSelected)="onTimeSelected($event)" 
       step="30"> 
    </calendar> 


    <ion-list inset> 
    <ion-list-header>{{ viewTitle }}</ion-list-header> 
    <ion-item> 
     <h3>Frans van Brugge <span class="date">9 juni 2017</span></h3> 
     <p>Fysiotherapie afsrpaak</p> 
    </ion-item> 

    <ion-item> 
     <h3>Frans van Brugge <span class="date">9 juni 2017</span></h3> 
     <p>Fysiotherapie afsrpaak</p> 
    </ion-item> 
    </ion-list> 
</ion-content> 


<ion-tabs color="light" tabsPlacement="top"> 
    <ion-tab [root]="tab1Root" tabTitle="Missies"></ion-tab> 
    <ion-tab [root]="tab2Root" tabTitle="Beloningen"></ion-tab> 
</ion-tabs> 

しかし、この意志はこのように、あなたはアクティブなページの下tabRootページを参照してくださいになります: enter image description here

どうすればこの問題を解決できますか?

答えて

0

あなたのapp.componet.tsファイルに行き、rootPageをProgressPageに設定してください。

ログイン画面を使用している場合や、別の画面からこの画面にナビゲートしている場合は、navCtrlでProgressPageを押していることを確認してください。

希望すると、これが役に立ちます。ありがとう。

+0

これは動作している下部タブではありませんが、今ではページに2つのタブを追加したいのですが、どういうことか分かりません。 – Sreinieren

+0

編集した質問をチェックする – Sreinieren

関連する問題