angular - Skicka data från olika sidor i Ionic

Har problem med att försöka skicka data från HomePage till AddTask. Konceptet är att jag matar in "Task" från AddTask-sidan och överför det till HomePage task:any[]-arrayen. Kan någon berätta hur man gör det? eller till och med ett bättre sätt att göra det?

Kod :

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

}

Svar #1

Du kan enkelt använda Ionic Storage-modulen för det. Spara bara din array där och använd den från var som helst där du behöver.

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

Svar #2

Du kan använda Behaviour Subjects [Shared Services] eller till och med ngrx i din app för att skicka data till komponenter.

Och om de är föräldra-barn-komponenter kan du också använda händelsesändare @Input och @Output.

Jag skulle föreslå att du går med Shared services om din app är måttlig i storlek, eller om den är stor, gå med ngrx.

Kolla in den här länken för ngrx. Den har liveexempel för samma.

kolla den här länken för delade tjänster som använder BS. Den har levande exempel på samma sak

kolla den här länken för föräldra-barn händelsesändare

Den allra första frågan.

Beteendesubjektsimplementering av gemensam tjänst

Service

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

UPPDATERAR KOMP

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

OBSERVERA KOMP

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();
      }
    }