Question

难以尝试将数据从 HomePage 传递到 AddTask 。我的概念是输入＆＃34;任务＆＃34;从 AddTask 页面转移到 HomePage task:any[]数组。谁能告诉我怎么做？甚至是更好的方法吗？

代码：

src/pages/home/home.ts

＆＃13;

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

＆＃13;

src/pages/addtask/addtask.ts

＆＃13;

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

＆＃13;

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

您可以在应用中使用行为主题[共享服务]甚至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);
    }
    }

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

在Ionic中传递来自不同页面的数据

2 个答案: