Polymer 应用程序未将路由参数传递给组件。

Question

我正在尝试使用 pagejs 访问聚合物应用程序中的 url 参数，但我无法找出为什么该值在组件内部仍然无法访问。

这是我对 routing.html 文件所做的

page('/crews/edit/:crewId', function(data) {
        app.params = data.params;      
        app.route = 'crew-edit';
        setFocus(app.route);
    });

然后我尝试将其传递到页面组件中

<section data-route="crew-edit" tabindex="-1">
        <bw-crew-edit crewId="{{ app.params.crewId }}"></bw-crew-edit>
</section>

然后最后进入组件本身

<dom-module is="bw-crew-edit">
  <template>
      {{crewId}}    
  </template>
  <script>
    (function() {
        "use strict";

        Polymer({
            is: 'bw-crew-edit',
            properties: {              
              crewId: {
                type: String,
                notify: true,
                observers: '_crewIdChanged'
              }
            },
            _crewIdChanged: function() {
              console.log(this.crewId);
            },

        });

    })();
  </script>
</dom-module>

我确信我已经按照事情的顺序进行了，但我无法弄清楚为什么组件没有接收到数据。

Answer 1

如聚合物中所示 docs:

Property name to attribute name mapping

...

When mapping attribute names to property names:

Attribute names are converted to lowercase property names. For example, the attribute firstName maps to firstname.

Attribute names with dashes are converted to camelCase property names by capitalizing the character following each dash, then removing the dashes. For example, the attribute first-name maps to firstName.

在您的情况下，您将使用 crew-id 属性来设置元素的 crewId 属性：

<bw-crew-edit crew-id="foo">

<head>
  <base href="https://polygit.org/polymer+1.4.0/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="polymer/polymer.html">
</head>
<body>
  <bw-crew-edit crew-id="foo"></bw-crew-edit>

  <dom-module id="bw-crew-edit">
    <template>
      <span>crewId: {{crewId}}</span>
    </template>
    <script>
      HTMLImports.whenReady(function() {
        Polymer({
          is: 'bw-crew-edit',
          properties : {
            crewId: String
          },
          ready: function() {
            console.log('crewId', this.crewId);
          }
        });
      });
    </script>
  </dom-module>
</body>

^codepen

Polymer 应用程序未将路由参数传递给组件。

Polymer app not passing route parameters to component.

routing

polymer

polymer-1.0

polymer-starter-kit

Property name to attribute name mapping