ionic/angular 在页面之间共享数据

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>

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

现在我正在努力尝试在第二页保存数据，将它们带回第一页，并为它们提供我需要的结构，以便将我需要保存的对象发送到服务。

第二页上的每个项目都有一个来自服务接收的对象的 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

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

方案一：

您可以实施 events。因此，在第二页中，您可以做自己的事情并发布数据。并且在第一页可以订阅事件，从第二页获取发布的数据。

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

方案二：

您可以使用 ModalController 打开您的第二个页面，并从模式控制器中，您可以在关闭模式时发送数据。在第一页，可以在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);
 }

}

ionic/angular 在页面之间共享数据

ionic/angular share data between pages

navigation

storage

ionic3

angular

方案一：

方案二：