如何将数据传回 Ionic 2 中的根页面？

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

数据流向为：

1. 用户打开“课程”选项卡。
2. 应用程序从 API 请求“类”数据。每个类别都拥有该用户的“状态”。
3. 用户选择一个类别。这将在应用程序中打开一个新视图，使用NavController.push(Page, { 'classes': classObjFromApi });.
4. 堆栈中添加了一些页面，每个页面都有classes对象传递给它。
5. 在最后一页上，API 被告知当前类已被采用，用户可以使用以下命令导航回根目录：NavController.popToRoot()

在根页面上显示每个课程的状态（“未开始”、“进行中”、“已完成”）。在上述流程中的第 5 点，用户被带回根目录，但这具有最初构建时的数据，该数据将类显示为“未开始”，即使它现在“已完成”。

如何从堆栈中的不同页面更新根页面上的数据？我原以为popToRoot()会接受navParams因此我可以检查根页面中是否存在该数据，如果存在则使用它，如果不存在则从 API 请求。

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

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

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

最好的方法是使用Events https://ionicframework.com/docs/api/util/Events/:

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

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

当用户更改该数据时，在任何其他页面中发布该事件：

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

EDIT

另一种方法是使用共享服务，并使用Subject发布/订阅更改。结果将非常类似于离子事件，但在这种情况下，您需要添加共享服务，然后在数据更新时使用它。我更喜欢 Ionic Events，但为了以防万一，您可以这样做：

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

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

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

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

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

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