開発者ドキュメント

Ionicのイベントを使用してページ間でデータとメッセージを渡す

Ionic のイベントは、さまざまなコンポーネントやページ間でメッセージを渡すために使用できるpub-subシステムです。 ここでは、ページがイベントを公開し、2番目のページがそのイベントをサブスクライブする簡単な例について説明します。 このようにして、2つの間でデータを簡単に渡すことができます。

イベントサービスの注入

イベントシステムを機能させるための最初のステップは、Eventsサービスをインポートして送信ページと受信ページの両方に挿入することです。

page1.ts
import { Component, Events } from 'ionic-angular';


page2.ts
import { Component, Events } from 'ionic-angular';


ここでは、わかりやすくするために、挿入されたインスタンスにevents1events2という名前を付けましたが、各インスタンスは異なるページクラスの一部であるため、両方とも同じ名前を使用して挿入できます。

イベントの公開と購読

Events サービスをインポートして両方のページに挿入したので、サービスのpublishメソッドとsubscribeメソッドを使用してイベントの公開とサブスクライブを開始できます。

Page1 では、ボタンが押されたときにメッセージを公開します。

page1.ts
handleClick(){
  this.events1.publish('my-message', '👋 Hello from page1!');
}

次に、2ページで、 my-message キー(Ionicではtopicと呼ばれます)を使用して公開されたメッセージを受信するようにサブスクライブします。

page2.ts
constructor(public events2: Events){
  this.events2.subscribe('my-message', (data) =>{
    console.log(data); // 👋 Hello from page1!
  });
}

イベントが公開され、 page2 が初期化されるとすぐに、サブスクライブイベントがトリガーされ、渡されたデータを使用してコードが実行されます。

publish を使用して送信されるデータは、文字列である必要はなく、オブジェクトである必要があることに注意してください。

実用的なアプリケーション

イベントシステムを使用するための多くの実用的なアプリケーションがあります。 たとえば、 navController を使用してページにポップバックすると同時に、ポップインされるページの情報を更新するために使用しました。

通常、navControllerの push メソッドを使用してページに移動する場合、データを navParams として渡すことができますが、 pop メソッドにはそのような機能がないため、イベントのpub-subサービスが付属しています-本当に便利です。

たとえば、このミニアプリケーションを見てください。

game.ts
import { Component, Events } from 'ionic-angular';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-game',
  templateUrl: 'game.html'
})
export class GamePage {
  constructor(
    public events: Events,
    public navController: NavController
  ) {
    this.events.subscribe('stats', statsData => {
      console.log(statsData);
    });
  }

show-winner.ts
import { Component, Events } from 'ionic-angular';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-show-winner',
  templateUrl: 'show-winner.html'
})
export class ShowWinnerPage {
  constructor(
    public events: Events,
    public navController: NavController
  ) {}

退会

GamePageクラスのeventsサービスは、次のようなものを使用してサブスクライブを解除しない限り、アプリケーションの存続期間中、メッセージを受信するためにサブスクライブされ続けます。

game.ts
private unsubscribeToEvents() {
  this.events.unsubscribe('stats', () => {
    console.log('Unsubscribed!');
  });
}

モバイルバージョンを終了