我正在尝试使用 pagejs 访问聚合物应用程序中的 url 参数，但我无法找出为什么该值在组件内部仍然无法访问。
这是我对路由.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>
我确信我已经遵循了事情的顺序，并且无法弄清楚为什么组件没有接收数据。
如 Polymer 文档中所示：
属性名称到属性名称的映射
。
将属性名称映射到属性名称时：
属性名称
- 带短划线
将转换为小写属性名称。例如，属性
firstName映射到firstname。的属性名称将转换为驼峰属性名称，方法是将每个短划线后面的字符大写，然后删除短划线。例如，属性
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>代码笔