Onsen UI 2 「pushPage」の引数の受け取り方

Onsen UI 1.xのときは、pushPageメソッドの第２引数でパラメータを渡し、
getCurrentPageメソッドで受け取ることができていたと思います。

OnsenUI2.xでは、getCurrentPageメソッドが使用できなくなったようですが、
代わりにどのように1つ前のページのパラメータを受け取ればよいのでしょうか？

中央あたりで「page1」から「page2」に遷移する際にパラメータを渡している部分
myNavigator.pushPage('page2.html', {param1:'aaa'})

このパラメータ「param1 : 'aaa'」をPage2で受け取り表示させたいです。

どなたか、ご回答よろしくお願いいたします。

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
  <script src="components/loader.js"></script>
  <script src="lib/onsenui/js/onsenui.min.js"></script>

  <link rel="stylesheet" href="components/loader.css">
  <link rel="stylesheet" href="lib/onsenui/css/onsenui.css">
  <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css">
  <link rel="stylesheet" href="css/style.css">

  <script>
    ons.ready(function() {
      console.log("Onsen UI is ready!");
      
    });
  </script>
</head>
<body>

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

  <ons-template id="page1.html">
    <ons-page id="first-page">
        <ons-toolbar>
            <dev class="center">Page1</dev>
        </ons-toolbar>

      <div class="content" style="text-align: center">
        <p>This is the 1st page.</p>
        <ons-button onclick="myNavigator.pushPage('page2.html',{param1:'aaa'})">Push page</ons-button>
      </div>
    </ons-page>
  </ons-template>

  <ons-template id="page2.html">
    <ons-page id="second-page">
      <ons-toolbar>
        <div class="left"><ons-back-button>戻る</ons-back-button></div>
        <div class="center">Page2</div>
      </ons-toolbar>

      <div class="content" style="text-align: center">
        <p>This is the second page.</p>
        <ons-button onclick="myNavigator.popPage()">Pop page</ons-button>
      </div>
    </ons-page>
  </ons-template>

</body>
</html>

行動規範の内容に同意します

回答1件

ベストアンサー

OnsenUIのチュートリアル
http://tutorial.onsen.io/?framework=vanilla&category=reference&module=navigator

にあるように受け取ることは可能です。

HTML
1<!DOCTYPE HTML>
2<html>
3<head>
4    <meta charset="utf-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
6    <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
7    <script src="components/loader.js"></script>
8    <link rel="stylesheet" href="components/loader.css">
9    <link rel="stylesheet" href="css/style.css">
10
11  <script>
12    ons.ready(function() {
13      console.log("Onsen UI is ready!");
14    });
15    
16    document.addEventListener('init', function(event) {
17      var page = event.target;
18    
19      if (page.id == 'second-page') {
20        page.querySelector('#param').innerHTML =page.data.param1;
21      }
22    });
23</script>
24</head>
25<body>
26
27  <ons-navigator id="myNavigator" page="page1.html"></ons-navigator>
28
29  <ons-template id="page1.html">
30    <ons-page id="first-page">
31        <ons-toolbar>
32            <dev class="center">Page1</dev>
33        </ons-toolbar>
34
35      <div class="content" style="text-align: center">
36        <p>This is the 1st page.</p>
37        <ons-button onclick="myNavigator.pushPage('page2.html',{data:{param1:'aaa'}})">Push page</ons-button>
38      </div>
39    </ons-page>
40  </ons-template>
41
42  <ons-template id="page2.html">
43    <ons-page id="second-page">
44      <ons-toolbar>
45        <div class="left"><ons-back-button>戻る</ons-back-button></div>
46        <div class="center">Page2</div>
47      </ons-toolbar>
48
49      <div class="content" style="text-align: center">
50        <p>This is the second page.</p>
51        <p id="param"></p>
52        <ons-button onclick="myNavigator.popPage()">Pop page</ons-button>
53      </div>
54    </ons-page>
55  </ons-template>
56
57</body>
58</html>