聚合物应用程序未将路线参数传递给组件。

debugcn 发表于 Dev

Bazinga777

我正在尝试使用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>

我确信我已经按照事情的顺序进行了操作，并且无法弄清组件为什么不接收数据。

托尼19

如Polymer docs中所示：

属性名称到属性名称的映射

...

将属性名称映射到属性名称时：

属性名称将转换为小写的属性名称。例如，属性firstName映射到firstname。

通过在每个破折号后面使用大写字母，然后删除破折号，将带有破折号的属性名称转换为camelCase属性名称。例如，属性first-name映射到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>

^码笔

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。