如何在 Ionic 2 中将数据传回我的根页面? [英] How can I pass data back to my root page in Ionic 2?

问题描述

我有一个 Ionic 2 应用程序.该应用程序的前提是上课.一旦打开了一个类，用户就会被标记为在远程 API 中学习该类.

I have an Ionic 2 app. The premise of the app is to take a class. Once a class has been opened the user is marked as taking this class in the remote API.

数据的流向是:

1. 用户打开类"选项卡.
2. 应用从 API 请求类"数据.每个类都拥有该用户的状态".
3. 用户选择一个班级.这会使用 NavController.push(Page, { 'classes': classObjFromApi }); 在应用中打开一个新视图.
4. 有几个页面添加到堆栈中，每个页面都有 classes 对象传递给它.
5. 在最后一页，API 被告知当前类已被占用，用户可以使用 NavController.popToRoot()
导航回根目录

1. User opens 'Classes' tab.
2. App requests 'Classes' data from API. Each class holds a 'status' for that user.
3. User selects a class. This opens a new view in the app using NavController.push(Page, { 'classes': classObjFromApi });.
4. There are a few pages added to the stack, each has the classes object passed to it.
5. On the final page the API is informed that the current class has been taken and the user can navigate back to the root using NavController.popToRoot()

在根页面上会显示每个课程的状态(未开始"、进行中"、已完成").在上述流程的第 5 点，用户被带回根目录，但这包含最初构造时的数据，显示类为未开始"，即使它现在已完成".

On the root page each class' status is shown ('Not started', 'In progress', 'completed'). At point 5 in the above flow the user is taken back to the root, but this has the data from when it was originally constructed, which shows the class as 'Not started', even though it's 'completed' now.

如何从堆栈中的不同页面更新根页面上的数据?我曾假设 popToRoot() 会接受 navParams 所以我可以检查根页面中是否存在该数据，如果存在则使用它，如果存在则从 API 请求不是.

How can I update the data on the root page from a different page in the stack? I had assumed that popToRoot() would accept navParams so I could check for the presence of that data in the root page and use it if it exists or request from the API if not.

我可以通过在 ionViewDidEnter 方法上从 API 重新请求数据来解决此问题，但这意味着每次用户查看此页面时都会发出 API/HTTP 请求，即使应用程序具有数据.看起来很乱.

I can get around this by re-requesting data from the API on the ionViewDidEnter method, but that means an API/HTTP request every time the user views this page, even though the app has the data. Seems messy.

如果可以的话，我宁愿不使用内部存储，因为它会在加载页面时造成延迟，因为我必须等待从存储中提取数据才能显示它.

I'd rather not use internal storage if I can help it, as it creates a delay when loading the page, as I have to wait for data to be pulled from storage before displaying it.

所以我的问题是:最好的方法是什么?如果要将数据传递给视图，如果 popToRoot() 不支持导航参数，我该怎么做?

So my question: what's the best way of doing this? If it is to pass data to the view, how do I do that if popToRoot() doesn't support nav params?

推荐答案

最好的方法是使用 事件:

The best way to do that would be by using Events:

在您的根页面中，订阅自定义事件，以便在每次发布该事件时执行一些代码:

In your root page, subscribe to a custom event, to execute some code every time that event is published:

import { Events } from 'ionic-angular';

constructor(public events: Events) {
  events.subscribe('status:updated', (updatedData) => {
    // You can use the updatedData to update the view
    // ...
  });
}

// Clean up the subscription when the page is about to be destroyed
ionViewWillUnload() {
  this.events.unsubscribe('status:updated');
}

当用户更改该数据时，将该事件发布到任何其他页面:

And publish that event in any other page, when the user changes that data:

import { Events } from 'ionic-angular';

constructor(public events: Events) {}

yourMethod(): void {
  // Your custom logic...
  // ...

  // Now you can publish the event to update the root page (and any other page subscribed to this event)
  this.events.publish('status:updated', updatedData);
}

<小时>

编辑

另一种方法是使用共享服务，并使用 Subject 发布/订阅更改.结果与 Ionic Event 的 非常相似，但在这种情况下，您需要添加一个共享服务，然后在数据更新时使用它.我更喜欢离子事件，但以防万一，你可以这样做:

Another way to do that, would be by using a shared service, and using a Subject to publish/subscribe to changes. The result would be pretty similar to Ionic Event's, but in this scenario you'd need to add a shared service and then use it when the data is updated. I'd prefer Ionic Events, but just in case, this is how you could do it:

import { Subject } from 'rxjs/Subject';

@Injectable()
export class MySharedService {
  public onDataChange: Subject<any>;

  constructor() {
    this.onDataChange = new Subject<any>();
  }

  public publishUpdate(newData): void {
    // Send the data to all the subscribers
    this.onDataChange.next(newData);
  } 
}

现在在您的根页面中，使用共享服务订阅更改

So now in your root page, subscribe to the changes using the shared service

import { Subscription } from 'rxjs/Subscription';

// ...

private onDataChangeSubscription: Subscription;

constructor(public mySharedService: MySharedService) {
  this.onDataChangeSubscription = mySharedService.onDataChange.subscribe(
    updatedData => {
      // You can use the updatedData to update the view
      // ...
    });
}

// Clean up the subscription when the page is about to be destroyed
ionViewWillUnload() {
  this.onDataChangeSubscription.unsubscribe();
}

从任何其他页面更新数据时，您也需要使用共享服务:

And you'd need to use the shared service too when updating the data from any other page:

constructor(public mySharedService: MySharedService) {}

yourMethod(): void {
  // Your custom logic...
  // ...

  // Now you can publish the event to update the root page (and any other page subscribed to this event)
  this.mySharedService.publishUpdate(updatedData);
}

如果您需要在每次更新数据时执行一些自定义逻辑，这种方法可能会更好，因此您可以在共享服务中执行，而不是在每个订阅者上执行此操作，然后广播结果...

This approach may be better if you need to execute some custom logic every time the data is updated, so instead of doing that on each subscriber, you could just do it in the shared service, and broadcast the result...

这篇关于如何在 Ionic 2 中将数据传回我的根页面?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！