ionicのページ間に配列を渡す2

Question

Ionic 2の新機能で、ページ間でデータを渡す際に問題があります。私のHome.tsファイルには、計算されたいくつかの数値を含むグローバル配列があり、* ngForメソッドを使ってHTMLテーブルに表示するために、Table.tsファイルに渡したいと思います。

これはHome.tsの関数で、配列を埋めてプッシュしようとしています（正しいとわかるので、計算をスキップします）。

`import { Component } from '@angular/core'; 
import { AlertController } from 'ionic-angular'; 
import { IonicPage,NavController, NavParams} from 'ionic-angular'; 
import {Table} from '../table/table'; 

export class HomePage { 

averagesList: Array <number> =[]; 

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

Calculate(){ 

var Averages=[]; 

//Calculations on the 'Averages' Array 

this.averagesList = Averages; 


this.navCtrl.push(Table,this.averagesList); 
} 

} 

は、だから、私はTable.tsファイルでそれを印刷しようが、それは私がlet変数合格しようとしました

import { Component } from '@angular/core'; 
import { IonicPage, NavController, NavParams } from 'ionic-angular'; 
import {HomePage} from '../home/home'; 
@IonicPage() 
@Component({ 
selector: 'page-table', 
templateUrl: 'table.html', 
}) 
export class Table{ 


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

} 

ionViewDidLoad() { 

console.log(this.navParams.get('averagesList')); 
} 
} 

未定義の結果を与え、それが働いていたので、なぜありませんそれは配列で動作しますか？

Answer 1

あなたの間違いはここconsole.log(this.navParams.get('averagesList'));

を使用している 'averagesList' キーです。あなたが直接

this.navCtrl.push(Table,this.averagesList); 

として送る場合は、そうのような値を取得することができます

：エルス

this.navCtrl.push(Table,{'averagesList' : this.averagesList}); 

：

はこのようにそれを取得するには、として送信する必要が

console.log(this.navParams.data); 

Answer 2

あなたはサービスを利用することができます。 angular2のように、コンストラクタ内でサービスをインポートして、このようなプロパティを使用できます。

import {OnInit} from '@angular/core'; 
import {someService} from ./somepath; 
... 
export class someClass implements OnInit{ 
let myTmpVar; //we will capture the shared data in this variable 
constructor (private smService: someService){ ... } 
ngOnInit{ 
    this.myTmpVar = this.smService.SharedServiceData; 
} 
... 
} 

Answer 3

ネストされたデータを渡すためのサービスを使用する。あなたのケースの計算オブジェクト。

messageServiceを作成して、以下のような変更を聞くことができます。

Home.ts

//other imports comes here 
    import {LocalMsgService} from 'services/localMsg'; 


    @Component({ 
     selector: 'home-component', 
     templateUrl: 'home.html' 
    }) 
    export class HomePage { 
     constructor(private msgService: LocalMsgService) { 

      } 

     dataToPass() { 
      console.log(this.averagesList); 
      this.msgService.sendMessage(this.averagesList); 
     } 

    } 

Table.ts

 //other imports comes here 
     import {LocalMsgService} from 'services/localMsg'; 
     import {Subscription} from 'rxjs/Subscription'; 


     @Component({ 
      selector: 'page-table', 
      templateUrl: 'table.html', 
     }) 

     export class TablePage{ 

      items: any; 
      subscription: Subscription; 

      constructor(
      public localMsgService : LocalMsgService) { 
       this.subscription = this.localMsgService.getMessage().subscribe(msg => { 
        this.items = msg; 
       }); 
      } 

     } 

を次のようにあなたのhome.tsとtable.tsページで使用することができます

import {Injectable} from '@angular/core'; 
import {Observable} from 'rxjs'; 
import {Subject} from 'rxjs/Subject'; 

@Injectable() 

export class LocalMsgService { 

private subject = new Subject(); 

sendMessage(message) { 
    this.subject.next(message); 
} 

clearMessage() { 
    this.subject.next(); 
} 

    getMessage(): Observable<any> { 
    return this.subject.asObservable(); 
    } 
}