2017-02-15 10 views
0

を接続します。私のionic2アプリでionic2テンプレート:リストの各項目(メインページ)私はトリッキーな状況に遭遇したタブ構造のページへ

、私は待っているリストのワークフローto-doリストのホームページを持っています承認。私のワークフロー項目のすべてが以下のようにワークフローの詳細を表示するには、タブのルート・ページにナビゲートする機能を呼び出すことができます。

// HomePage: 
    selectItem(workflow){ 
     this.nav.push(TabsPage, workflow); 
    } 

// my HomePage view 
<ion-header> 
    <ion-navbar> 
    <ion-title> 
     My to-do list 
    </ion-title> 
    <ion-buttons end> 
     <button ion-button icon-only (click)="logOut()"> 
     <ion-icon name="log-out"></ion-icon> 
     </button> 
    </ion-buttons> 
    </ion-navbar> 
</ion-header> 

<ion-content> 

    <ion-list> 
    <ion-item text-wrap *ngFor="let w of wfList | async" (click)="selectItem(w)"> 
     <h3>{{w.case.name}} </h3> 

     <ion-icon name="ios-arrow-dropright-outline" item-right></ion-icon> 
    </ion-item> 
    </ion-list> 
</ion-content> 

私のタブのルートは3つの異なるページが含まれています。 (すべてのワークフロー情報を3つのタブに分類)。

//TabsPage: 
tab1Root: any = PageA; 
tab2Root: any = PageB; 
tab3Root: any = PageC; 

//Tabs Html 

    <ion-header> 
    <ion-navbar> 
     <ion-title> 
     TabsRoot 
     </ion-title> 

    </ion-navbar> 
    </ion-header> 
<ion-tabs> 
    <ion-tab [root]="tab1Root" tabTitle="PageA" tabIcon="home"></ion-tab> 
    <ion-tab [root]="tab2Root" tabTitle="PageB" tabIcon="information-circle"></ion-tab> 
    <ion-tab [root]="tab3Root" tabTitle="PageC" tabIcon="contacts"></ion-tab> 
</ion-tabs> 

私のページには、「承認」ボタンがあります。ユーザーがワークフローを承認した場合、私はトーストメッセージを表示してから、自分の予定表にポップアップしたいと思います。 (私のホームページ)。

// PageA: 
approve(id){ 
    this.wf.changeStatus(id).then(() => { 
     this.navCtrl.pop(); <- error 
    }); 
    } 

すべては私が戻ってポップしようとしたときを除いて、正常に動作し、私はエラーメッセージが表示されます

EXCEPTION: Uncaught (in promise): false 

を私はpopTo(HomePage)popAll()を使用しようとしましたが、私は同じ結果を得ました。 popRoot()を使用すると、そこに内容のないタブのルートページに戻ります。 setRoot(HomePage)を使用すると、ホームページに戻りますが、navbarにはまだ「戻る矢印」があります。

誰でもお手伝いできますか?どうもありがとうございました !

お使いのシステム情報:

Cordova CLI: 6.5.0 
Ionic Framework Version: 2.0.0 
Ionic CLI Version: 2.2.1 
Ionic App Lib Version: 2.2.0 
Ionic App Scripts Version: 1.1.0 
ios-deploy version: 1.9.1 
ios-sim version: 5.0.10 
OS: OS X El Capitan 
Node Version: v6.9.5 
Xcode version: Xcode 8.2.1 Build version 8C1002 

以下は私の要素のレイアウトです:

ホームページ - > TabRoot(ページA、ページBとPageCが含まれます)。 HomePageはタブの親ページです。

+0

:-)支援しようと感謝、再びホームページ

// PageA.ts import { App, NavController, NavParams } from 'ionic-angular'; constructor(public app: App) { ..... } approve(id){ this.wf.changeStatus(id).then(() => { let tabsRoot = this.app.getRootNav(); tabsRoot.pop(); }); } 

に戻りますtabsRoot.pop()を行う 'this.navCtrl.popは()'んアプリは戻ってきますが、エラーを投げますか、それとも戻っていませんか?また、Ionic 2の正確なバージョンを使用していることを教えてください。もしあなたがわからないのであれば、CLIで 'ionic info'を実行するだけです。バージョンは" Ionic Framework Version: "と書かれています。 – ablopez

+0

ありがとうございました:-)アプリはエラーメッセージを投げ返し、戻ってきません。以下は私のイオン性情報は次のとおりです。 お使いのシステム情報: コルドバCLI:6.5.0 イオンFrameworkのバージョン:2.0.0 イオンCLIバージョン:2.2.1 イオンのApp Libのバージョン:2.2.0 イオンのAppスクリプトバージョン: 1.1.0 IOS-デプロイバージョン:1.9.1 IOS-SIMバージョン:5.0.10 OS:OS Xエルキャピタン ノードバージョン:v6.9.5 Xcodeのバージョン:8.2.1 Xcodeのビルドバージョン8C1002 –

+0

OK、今HomePageクラスで 'selectItem()'メソッドを使用しましたが、タブによって呼び出されて "現在のタブ"を変更するメソッドがありますか? – ablopez

答えて

1

私は自分の答えを見つけたと思う。ヒントのためにDjamwareに感謝します。

私のホームページでは、nav.push(TabsRoot)を呼び出しました。 TabRootを私のHomePageの上に置きます。

私のTabsRootには3つのサブページがあり、それらはすべて同じRootPageを持っています。これはTabsRootページです。

<ion-tabs> 
    <ion-tab [root]="tab1Root" tabTitle="PageA" tabIcon="home"></ion-tab> 
    <ion-tab [root]="tab2Root" tabTitle="PageB" tabIcon="information-circle"></ion-tab> 
    <ion-tab [root]="tab3Root" tabTitle="PageC" tabIcon="contacts"></ion-tab> 
</ion-tabs> 

したがって、PageA(またはBまたはC)のタブルートページのサブページは、最初にルートページに戻る必要があります。その後rootPageから、私はあなたが実行すると、誰もがここで

1

タブ(タブの項目)から移動する場合は、タブのルートに移動する必要があります。ここに例があります。

let nav = this.app.getRootNav(); 
nav.setRoot(AnotherPage); 

タブでは、my tutorialという問題が見つかります。

0

OK、あなたのコードを分析した後、親がHomePageであるサブページ(TabsRoot)の中にタブを置いているようです。ただし、タブはルートページ(ホームページ)に移動する必要があります。

だから、HTMLマークアップとコードをHomePage(ルート)に移動してみるとうまくいくはずです。

関連する問題