离子/角共享页面之间的数据

Question

我无法弄清楚如何达到以下结果。

我有2页。第一个

<ion-header>
  <ion-navbar color="primary">
    <ion-title>{{evId}} - {{items.list_code}}</ion-title>
  </ion-navbar>
</ion-header>
<ion-content padding>
  <ion-item *ngFor="let item of items.List_group">
    <ion-label>{{item.GroupName}}</ion-label>
    <button ion-button clear item-right (click)="goToTemplate(evId,item)">
      <ion-icon name="arrow-forward"></ion-icon>
    </button>
  </ion-item>
  <button ion-button class="submit-btn" full type="button" (click)="saveData()" >Save</button>
</ion-content>

和第二个

<ion-header>
  <ion-navbar color="primary">
    <ion-title>{{empl}} - {{items.GroupName}}</ion-title>
  </ion-navbar>
</ion-header>
<ion-content padding>
  <ion-item *ngFor="let item of items.List_field">
    <ion-label>{{item.Field_Name}} - {{item.Field_Type}}</ion-label>
    <ion-textarea *ngIf='item.Field_Type==="textarea"' placeholder="Enter a description" ></ion-textarea>
    <ion-checkbox *ngIf='item.Field_Type==="chk"' ></ion-checkbox>
    <ion-select *ngIf='item.Field_Type==="chklist"' multiple="true" (change)="storeField(item.id,$event)">
      <ion-option *ngFor="let option of item.Field_Default_Values" [value]="option.id" >{{option.Value}}</ion-option>
    </ion-select>
    <ion-select *ngIf='item.Field_Type==="ddl"' >
      <ion-option *ngFor="let option of item.Field_Default_Values" [value]="option.id" >{{option.Value}}</ion-option>
    </ion-select>
    ...
</ion-content>

第一个基于收到的对象动态构建菜单：单击按钮OH的每行应用程序路由到第二页，并根据其类型动态创建组件列表。

现在，我正在努力地尝试将数据保存在第二页中，将它们带回第一页，并给他们我需要发送我需要保存到服务的对象所需的结构。

第二页上的每个项目都有来自服务收到的对象的ID。

{
 ...
 Field_Name:"A/C Type"
 Field_Type:"chklist"
 id:15
 IsMandatory:true
 Sequence:1
 ...
}

在导航的末尾，我需要在第一页上放入具有这样的对象

的第一页

"list_reportfield": [
  {
    "Field_id": 0,
    "List_Values": ["string"]
  }
]

包含所有ID及其值的列表，将发送到保存服务。

我想找到一种优雅的方法来实现这一结果。

有人给我提示吗？谢谢你们所有的人

Answer 1

您可以使用几种方法从第二页到第一页获得保存的数据：

解决方案1：

您可以实现事件。因此，在第二页中，您可以完成您的工作并发布数据。在第一页中，您可以订阅该事件并从第二页获取已发布的数据。

    import { Events } from 'ionic-angular';
    
    // first page (listen for the user created event after function is called)
    constructor(public events: Events) {
      events.subscribe('user:created', (user, time) => {
        // user and time are the same arguments passed in `events.publish(user, time)`
        console.log('Welcome', user, 'at', time);
      });
     }
      // second page (publish an event when a user is created)
    constructor(public events: Events) {}
    createUser(user) {
      console.log('User created!')
      this.events.publish('user:created', user, Date.now());
    }

解决方案2：

您可以使用ModalController和Modal Controller打开第二页，可以在解散模式时发送数据。在第一页中，您可以在 ondiddismiss 中获取已发送的数据。

import { Component } from '@angular/core';
import { ModalController, ViewController } from 'ionic-angular';
@Component(...)
class HomePage {
 constructor(public modalCtrl: ModalController) {
 }
 presentProfileModal() {
   let profileModal = this.modalCtrl.create(Profile, { userId: 8675309 });
   profileModal.onDidDismiss(data => {
     console.log(data);
   });
   profileModal.present();
 }
}
@Component(...)
class Profile {
 constructor(public viewCtrl: ViewController) {
   
 }
 // return the saved data when dismissing the modal
 saveData() {
   let data = { 'foo': 'bar' };
   this.viewCtrl.dismiss(data);
 }
}