解-1：

Question

我无法弄清楚如何实现以下结果。

我有2页。第一个

$ awk '$3~/^RequestXML:/{a[$2]=$0} $3~/^ResponseXML/{delete a[$2]} END{for(i in a)print a[i]}' file

和第二个

<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>

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

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

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

<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>

在导航的最后，我需要在第一页上找到像这样的对象

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

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

我想找到一种优雅的方法来实现这个结果。尽可能接近最佳实践。

有人给我一个暗示吗？非常感谢所有人

Answer 1

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

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

解-2：

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

}

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

1 个答案:

解-1：

解-2：