从路由器到 dom-元素的聚合物数据

Question

我从 Polymer 1.0 开始，并创建了一个新的路由端点，如下所述。

page('/users/:name', scrollToTop, function(data) {
      app.route = 'user-info';
      app.params = data.params;
    });

所以如果我去 users/bob 它将去路线 "user-info"

在我的 index.html 中，路线定义如下

<section data-route="user-info">
   <web-homepage></web-homepage>
</section>

其中 web-homepage 是自定义元素。

自定义元素定义如下

<dom-module id="web-homepage">
  <template>
    This is homepage
  </template>

  <script>
    (function() {
      'use strict';

      Polymer({
        is: 'web-homepage',
        ready:function() {
           //want to get the route parameters (eg: bob) here 
        }
      });
    })();
  </script>

</dom-module>

有没有办法获取路由参数“:name”的值，即 ready 函数中的 bob？

Answer 1

ready 函数在导入和创建元素时执行。如果你在那里访问路由参数，它很可能是 null/empty/undefined.

但是您可以将路由参数传递给元素，如下所示。

app.params中的params是app的属性。您可以简单地将它传递给它的子元素。

index.html 应该是这样的

<section data-route="user-info">
   <web-homepage route-params=[[params]]></web-homepage>
</section>

在 web-homepage 中定义路由参数

<dom-module id="web-homepage">
  <template>
    This is homepage
  </template>

  <script>
    (function() {
      'use strict';

      Polymer({
        is: 'web-homepage',
        properties: {
          routeParams: {
            type: Object,
            observer: '_routeParamsChanged'
          }
        },
        ready:function() {
           //ready function is run during element creation. route-params will most likely be empty/null/undefined
           //Just random
           //want to get the route parameters (eg: bob) here 
        },
        _routeParamsChanged: function(newValue) {
           console.log('route params: ', newValue);
        }
      });
    })();
  </script>

</dom-module>

从路由器到 dom-元素的聚合物数据

Polymer data from router to dom-element

polymer

polymer-1.0

polymer-starter-kit