代码之家  ›  专栏  ›  技术社区  ›  Nik Rubblers

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

  •  0
  • Nik Rubblers  · 技术社区  · 7 年前

    我不知道怎样才能达到下面的结果。

    我有两页。第一个

    <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及其值的列表。

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

    有人给我暗示吗? 非常感谢大家

    1 回复  |  直到 7 年前
        1
  •  1
  •   Community Mohan Dere    5 年前

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

    解决方案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 在模态控制器中,您可以在解除模态时发送数据。在第一页中,您可以在 OnDidDisclose公司 .

    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);
     }
    
    } 
    
    推荐文章