Geek Answers Handbook

How to transfer data back to my root page in Ionic 2?

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

Data stream:

  • The user opens the "Classes" tab.
  • Requests for Classes applications from the API. Each class has a “status” for this user.
  • The user selects a class. This opens up a new look in the app with NavController.push(Page, { 'classes': classObjFromApi });.
  • Several pages have been added to the stack, each of which has an object classes.
  • The last page of the API reports that the current class has been taken, and the user can return to the root using NavController.popToRoot()

The status page of each class is displayed on the root page ("Not Running", "Running", "Finished"). At point 5 in the stream above, the user returns to the root, but he has data when they were originally built, which shows the class as “Not Running”, even if it is “completed” now.

How can I update the data on the root page from another page on the stack? I assumed that I popToRoot()would accept navParamsso that I could check the availability of this data on the root page and use it if it exists, or request the API if not.

, API ionViewDidEnter, , API/HTTP- , , , . .

, , , , , .

, : ? , , popToRoot() nav?

+6
1

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

Subject / . Ionic Event, , , . 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);
}

, - , , , , ...

+8

More articles:


All Articles