web-dev-qa-db-ja.com

Ionic 2タブにNavParamsを渡す

私はIonic 2を使用して最初のアプリを作成し始めましたが、多くの試行錯誤を経て、多くのGoogle検索が役立つものを見つけることができなくなりました。

いくつかのNavParamsをタブに渡そうとしています。 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を取得することはできません。

@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}
    }
}

パラメータをタブページからタブ自体に渡す方法や、何らかの方法でタブの親からパラメータを要求する方法が完全にはわかりません。私は次のようなものを想定しています：

this.tab1Root = Tab1(this.params);

どんな助けも大歓迎です！

ionic-frameworkionic2
41
lawlesscreation

この質問は数週間前のものなので、すでに答えを見つけているかもしれません。この機能は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 で参照されます）。

<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>

次に、Tab1ページで、他のページと同じようにNavParamsを参照できます。foodIdに渡された値はそこにあります。

65
Steve Michelotti

まだ理解していない人のために.....

私は多くのことを検索しました私が得た唯一の答えはネイティブストレージを使用していたか、サービスまたはセッションストレージを使用していました ...しかし、それは私が望んでいたものではありませんでした... Tabs.tsページにNavParamsにデータがあり、それを望む場合[rootParam]としてそれぞれのタブに渡す ...する必要があるのは割り当てる代わりNavParams to a variable Tabs.tsページでできることは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);
}
12
startsWith_R

私が知っているタブページにパラメータを渡す直接的な方法はありません。

NavControllerをいじって動作させることができると思います。

適切な回避策は、パラメーターを注入されたサービスに入れることです：app/services/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にサービスを注入することを忘れないでください

7
jvoigt

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-キーとデータを設定します

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

  fooId: {
    firstName: "lawlesscreation",
    email: "[email protected]",
    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 NavParamsを使用し、this.navParams.get（key）を使用してデータを取得します

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) {
  }

}
1
juniortan

多くの方法で試しましたが、どれも役に立たなかった。私のアプリケーションはそれほど複雑ではないので、ionic native storage plugin を使用して実装しました。新しいタブページをトリガーするイベントでは、いくつかの変数をネイティブストレージに格納します（スニペットは以下のとおりです）。

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

次のタブページのコンストラクタまたはionviewdidloadページで、この変数を確認し、必要なアクションを実行します。スニペットは以下のとおりです。

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

注：これは、小規模なアプリケーション、または変数の限られたセットを渡す必要がある場合にのみ適しています。多数の変数がある場合、アプリのキャッシュにより多くのスペースが必要になり、アプリのパフォーマンスが低下する可能性があります。

1
Vasanth