Ionicの異なるページからデータを渡す

Question

からデータを渡すのが難しいです。〜AddTask。コンセプトは、AddTaskページから「タスク」を入力し、ホームページに転送することです。task:any[]アレイに転送します。それを行う方法を教えてもらえますか？それを行うにはさらに良い方法ですか？

コード：

src/pages/home/home.ts 

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

 
@Component({ 
 
    selector: 'page-home', 
 
    templateUrl: 'home.html' 
 
}) 
 
export class HomePage { 
 

 

 
    // Get Value from Post() with the format like below 
 
    tasks:any[] = [ 
 
    {task:"Make an App",priority:"High",status:"pending"} 
 
    ] 
 

 
    constructor(public navCtrl: NavController) { 
 

 
    } 
 

 
    openCT(){ 
 
    this.navCtrl.push(AddTask); 
 
    } 
 

 
}

src/pages/addtask/addtask.ts 

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

 
@Component({ 
 
    selector: 'page-task', 
 
    templateUrl: 'addtask.html' 
 
}) 
 
export class AddTask { 
 

 
    // Give Value to tasks:any[] 
 
    post(){ 
 
    this.navCtrl.push(HomePage,{ 
 
     "task":"Pushing Task", 
 
     "priority":"High", 
 
     "status":"pending" 
 
    }) 
 
    } 
 

 
    constructor(public navCtrl: NavController) { 
 

 
    } 
 

 
    close(){ 
 
    this.navCtrl.pop() 
 
    } 
 

 
}

Answer 1

あなたは簡単にIonic Storageモジュールを使用することができます。その上に配列を保存し、必要な場所で使用してください。

home.ts

// set a key/value 
storage.set('tasksKey', tasks); 

addtask。TS

// get a key/value pair 
    storage.get('tasksKey').then((val) => { 
    console.log('tasks', val); 
    }); 

Answer 2

あなたCA n Behavior Subjects [Shared Services]を使用するか、アプリケーション内でngrxを使用してデータをコンポーネントに渡します。

親子コンポーネントの場合は、イベントエミッタ@Inputと@outputを使用することもできます。

あなたのアプリケーションのサイズが適度であるか、大きなものがngrxに含まれている場合は、共有サービスを利用することをお勧めします。

ngrxを確認してください。それはshared services using BS .ITのため、このリンクは同じ

チェックのためのライブの例parent child event emitters

非常に最初の質問については、このリンクを持っている同じ

チェックのためのライブの例があります。共有サービスの

行動件名実装

サービス

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

    @Injectable() 
    export class NavService { 
     // Observable navItem source 
     private _navItemSource = new BehaviorSubject<number>(0); 
     // Observable navItem stream 
     navItem$ = this._navItemSource.asObservable(); 
     // service command 
     changeNav(number) { 
     this._navItemSource.next(number); 
     } 
    } 

更新COMP

@Component({ 
    selector: 'my-nav', 
    template: ' 
     <div class="nav-item" (click)="selectedNavItem(1)">nav 1 (click me)</div> 
     <div class="nav-item" (click)="selectedNavItem(2)">nav 2 (click me)</div>' 
    }) 
    export class Navigation { 
    item = 1; 
    constructor(private _navService:NavService) {} 
    selectedNavItem(item: number) { 
     console.log('selected nav item ' + item); 
     this._navService.changeNav(item); 
    } 
    } 

観察COMP

import {Component} from '@angular/core'; 
    import {NavService} from './nav.service'; 
    import {Subscription} from 'rxjs/Subscription'; 

    @Component({ 
     selector: 'obs-comp', 
     template: 'obs component, item: {{item}}' 
    }) 
    export class ObservingComponent { 
     item: number; 
     subscription:Subscription; 
     constructor(private _navService:NavService) {} 
     ngOnInit() { 
     this.subscription = this._navService.navItem$ 
      .subscribe(item => this.item = item) 
     } 
     ngOnDestroy() { 
     // prevent memory leak when component is destroyed 
     this.subscription.unsubscribe(); 
     } 
    }