在 Ionic 中从不同页面传递数据答案

【问题标题】：Passing data from different pages in Ionic在 Ionic 中从不同页面传递数据
【发布时间】：2018-01-13 07:51:58
【问题描述】：

尝试将数据从 HomePage 传递到 AddTask 时遇到困难。这个概念是我从 AddTask 页面输入“任务”并将其转移到 HomePage 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()
  }

}

【问题讨论】：

你确实用一些参数推送了你的主页，所以在你的主页中，只需通过NavParams获取它
你能给我看看它的示例代码还是把它作为答案发布？
我上面提到的链接中的示例代码。只需在你HomePage中使用this.tasks = this.navParams.get('task');
感谢您的解决方案，我稍后会尝试:)

标签： angular typescript ionic-framework ionic2 ionic3

【解决方案1】：

您可以在您的应用中使用 Behavior Subjects [共享服务] 甚至 ngrx 将数据传递给组件。

如果它们是父子组件，您还可以使用事件发射器 @Input 和 @output。

如果您的应用程序大小适中或使用 ngrx，我建议您使用共享服务。

查看此链接以获取ngrx。它有相同的活生生的例子

查看此链接以获取 shared services using BS。它有相同的实时示例

查看此链接以获取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: '
      &lt;div class="nav-item" (click)="selectedNavItem(1)"&gt;nav 1 (click me)&lt;/div&gt;
      &lt;div class="nav-item" (click)="selectedNavItem(2)"&gt;nav 2 (click me)&lt;/div&gt;'
    })
    export class Navigation {
    item = 1;
    constructor(private _navService:NavService) {}
    selectedNavItem(item: number) {
      console.log('selected nav item ' + item);
      this._navService.changeNav(item);
    }
    }

观察比较

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

【讨论】：

【解决方案2】：

您可以轻松地使用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);
  });

【讨论】：