【Onsen UI】popPage()をした後の画面を操作する方法

概要

popPage()をした後に、遷移後の画面を取得できず混乱したため、解決策をメモ
pushPage()に関する記事はたくさんあるのに...

問題点

popPage()をした後に戻った先の画面が取得できない

解決策

popPage()の後に発生するイベント、"postPop" を利用
リファレンスの最後に載っていた https://ja.onsen.io/v2/api/js/ons-navigator.html

具体的には、JavaScriptに以下の EventListener を追記

document.addEventListener('postpop', function(event){
  var newPage = event.enterPage;
  alert(newPage.id);
})

サンプルコード

Navigator のリファレンスにコピペしてもテストできます

html

<ons-navigator swipeable id="myNavigator" page="page1.html"></ons-navigator>

<template id="page1.html">
  <ons-page id="page1">
    <ons-toolbar>
      <div class="center">Page 1</div>
    </ons-toolbar>

    <p>This is the first page.</p>

    <ons-button id="push-button">Push page</ons-button>
  </ons-page>
</template>

<template id="page2.html">
  <ons-page id="page2">
    <ons-toolbar>
      <div class="left"><ons-back-button>Page 1</ons-back-button></div>
      <div class="center"></div>
    </ons-toolbar>

    <p>This is the second page.</p>
  </ons-page>
</template>

js

document.addEventListener('init', function(event) {
  var page = event.target;

  if (page.id === 'page1') {
    page.querySelector('#push-button').onclick = function() {
      document.querySelector('#myNavigator').pushPage('page2.html', {data: {title: 'Page 2'}});
    };
  } else if (page.id === 'page2') {
    page.querySelector('ons-toolbar .center').innerHTML = page.data.title;
  }
});

//  追記は以下だけ
document.addEventListener('postpop', function(event){
  var newPage = event.enterPage;
  alert(newPage.id);
})