Handling Data in Events

Ionic Framework ionic-v3
1

Hello everyone!
I´m new to ionic and at the moment I´m trying to communicate between Pages. I want to share an Object depending on the User Interaction.
I found the Docu about Handling events in Ionic and now I´m trying to publish Data in one page to the other:

  openPage(page) {
    this.nav.setRoot(page.component);
    this.events.publish('channel:changed', page)
  }

In the Other Page I´m subscribing to this Event:

  public channel: any = {}

  constructor(public navCtrl: NavController, public events: Events) {
    events.subscribe('channel:changed', (channel) => {
      this.channel = channel
      console.log(this.channel)
    })
  }

Until here everthing work fine!
But now i want to display the Title of the channel in the HTML File

<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>{{ channel.title }}</ion-title>
  </ion-navbar>
</ion-header>

But no title is displayed…
Can anyone help me?

2

I don’t know if ionic events are the best way for your use case. Does the page, that subscribes to the event already exists when you publish the event? When the page subscribes for events, it will only get events that get published since the subscription. The page misses all events were published before the subscription.

There are two common ways to communicate between pages. First is to pass an object when you push to a new page:

// Passing channel object to HomePage
this.nav.push('HomePage', { channel: this.channel });
// Accessing channel object from HomePage
this.channel = this.navParams.get('channel');

Another way is to use Providers (Services) for that.
https://angular.io/tutorial/toh-pt4

1 Like
3

Your first way works exactly the way I expect!
Thank you!