イオン2通過タブNavParams to tab

Question

私は、Ionic 2を使用して最初のアプリケーションを作成し始めています。多くの試行錯誤は、Googleの検索の数が役に立たない点があります。

私はタブに、いくつかのNavParamsを渡すためにしようとしています。

@Page({ 
    templateUrl: 'build/pages/tabs/tabs.html' 
}) 
export class TabsPage { 
    constructor(params: NavParams) { 

     this.params = params; 
     console.log(this.params); // returns NavParams {data: Object} 

     // this tells the tabs component which Pages should be each tab's root Page 
     this.tab1Root = Tab1; 
     this.tab2Root = Tab2; 
     this.tab3Root = Tab3; 
    } 
} 

しかし、私は、タブ自体の中NavParamsを得るように見えることはできません：NavParamsは親タブページでご利用いただけます

@Page({ 
    templateUrl: 'build/pages/tab1/tab1.html' 
}) 
export class Tab1 { 
    constructor(nav: NavController, params: NavParams, platform: Platform) { 
     this.nav = nav; 
     this.params = params; 
     this.platform = platform; 

     console.log(this.params); // returns NavParams {data: null} 
    } 
} 

は、私はちょうどからのparamsを渡す方法を全くわからないんだけどタブはタブ自体にアクセスするか、タブの親から何らかのパラメータを要求します。私は次のように仮定します：

this.tab1Root = Tab1(this.params); 

何か助けていただければ幸いです！

Answer 1

にサービスを注入この質問は数週間古いですので、あなたはすでにANを発見したかもしれませんswer。この機能は2月に追加されました：https://github.com/driftyco/ionic/issues/5475

オリジナルのタブページからコードを取得すると、パラメータが「親」タブページに渡され、fooIdという名前のプロパティに格納するとします（これはオブジェクトでも、単純な整数でもよいし、文字列値、何でも）：

@Component({ 
    templateUrl: 'tabs.html' 
}) 
export class TabsPage { 
    constructor(params: NavParams) { 

     this.params = params; 
     console.log(this.params); // returns NavParams {data: Object} 
     this.fooId = this.params.data; 

     // this tells the tabs component which Pages should be each tab's root Page 
     this.tab1Root = Tab1; 
     this.tab2Root = Tab2; 
     this.tab3Root = Tab3; 
    } 
} 

その後、あなたtabs.htmlに、あなたはrootParams属性（rootParamsはdocumenation hereで参照されている）を使用して、このようにそれを参照することができます。あなたのTab1をしてその後

<ion-tabs> 
    <ion-tab tabTitle="Tab1" [root]="tab1Root" [rootParams]="fooId"></ion-tab> 
    <ion-tab tabTitle="Tab2" [root]="tab2Root" [rootParams]="fooId"></ion-tab> 
    <ion-tab tabTitle="Tab3" [root]="tab3Root" [rootParams]="fooId"></ion-tab> 
</ion-tabs> 

をページ、他のページと同じようにNavParamsを参照することができ、foodIdの値が渡されます。

Answer 2

私が知っているタブページにParamsを渡す直接の方法はありません。

NavControllerと一緒に遊んでも問題ありません。 アプリ/サービス/ params.js：

import {Injectable} from 'angular2/core'; 

@Injectable() 
export class Params{ 
    constructor(){ 
     console.log("Params()"); 
     this.params={}; 
    } 
} 

とコントローラで：

import {Params} from '../../services/params' 

    @Page({ 
     templateUrl: 'build/pages/home/home.html', 
    }) 
    export class XYPage{ 

    constructor(nav: NavController,platform: Platform, params: Params) { 
     console.log("XYPage()",this); 
     console.log("XYPage()", params.params); 
     params.params={id="001"}; 

をすることを忘れてはいけない

きちんとこの問題を回避するには、注入されたサービスにパラメータを置くことですあなたの@App

Answer 3

私は多くの方法を試しましたが、どれも役に立たなかった。私のアプリケーションは複雑さをほとんど伴わなかったので、イオン性のネイティブストレージpluginを使って実装しました。新しいタブページをトリガーするイベントでは、ネイティブストレージにいくつかの変数を保存します（スニペットは以下のとおりです）。私は、この変数をチェックし、必要なactions.Snippetを実行します次のタブページのコンストラクタまたはionviewdidloadページで

this.nativeStorage.setItem('myitem', {property: 'value', anotherProperty: 'anotherValue'}) 
    .then(
    () => console.log('Stored item!'), 
    error => console.error('Error storing item', error) 
); 

は以下の通りです。

this.nativeStorage.getItem('myitem') 
    .then(
    data => console.log(data), 
    error => console.error(error) 
); 

注：これはわずかアプリケーションまたは場所変数の限られたセットを渡す必要があるのに適しています。変数が多い場合は、アプリのキャッシュ容量が大きくなりアプリのパフォーマンスが低下する可能性があります。まだ考え出したていない人のために

Answer 4

.....

私は多くのことを検索したとは唯一私がネイティブストレージを使用して、サービスやセッションストレージを使用していたしまった答え...あなたはTabs.tsページにNavParams内のデータを持っていると、あなたがする必要がどのようなそれぞれのタブ ... へ[rootParam]としてそれにパスをしたい場合はそれが、そう ...私が望んでいませんでしたあなたは何をすることができるTabs.tsページ内の変数にNavParamsを割り当てるのではなく、ですか？それをバインドするyをHTMLページの[rootParams]に追加します。 よう..

tabs.ts

constructor(public navParams: NavParams) { } 

tabs.html

<ion-tab [root]="tab1Root" [rootParams]="navParams.get('single')" tabTitle="Customer"></ion-tab> 
<ion-tab [root]="tab2Root" [rootParams]="navParams.get('second')" tabTitle="Map"></ion-tab> 

それとも

tabs.html

<ion-tab [root]="tab1Root" [rootParams]="navParams.data" tabTitle="Customer"></ion-tab> 

tab1.ts

constructor(public navParams: NavParams) {} 

ionViewDidLoad() { 
    console.log('ionViewDidLoad tab1Page'); 
    console.log(this.navParams.data); 
} 

Answer 5

tabs.html - [rootParams] = "paramNameに" を追加します。あなたは

<ion-tabs> 
    <ion-tab tabTitle="Tab1" [root]="tab1Root" [rootParams]="fooId"></ion-tab> 
    <ion-tab tabTitle="Tab2" [root]="tab2Root"></ion-tab> 
    <ion-tab tabTitle="Tab3" [root]="tab3Root"></ion-tab> 
</ion-tabs> 

tabs.tsにデータを渡したいタブに - インポートNavParamsと使用this.navParams.get - キーとデータ

export class TabsPage { 
    this.tab1Root = Tab1; 
    this.tab2Root = Tab2; 
    this.tab3Root = Tab3; 

    fooId: { 
    firstName: "lawlesscreation", 
    email: "user@email.com", 
    score: number // can also set it later in the constructor 
    } 

    constructor() { 
    let score = getScore(); //some method to get score 
    this.fooId.score = score; 
    } 
} 

tab1のページを設定（キー）データを取得する

import { Component } from '@angular/core'; 
import { IonicPage, NavController, NavParams } from 'ionic-angular'; 

@IonicPage() 
@Component({ 
    selector: 'page-profile', 
    templateUrl: 'profile.html', 
}) 
export class Tab1 { 
    firstName = this.navParams.get('firstName'); 
    score = this.navParams.get('score'); 
    userEmail = this.navParams.get('email'); 

    constructor(public navCtrl: NavController, public navParams: NavParams) { 
    } 

}