我在 polymer 中有以下代码工作正常的元素:
<i class="fa fa-user"></i>
但是，我想更改 font-awesome基于参数的图标。所以我将该行更改为:
<i class="fa fa-{{icon}}"></i>
然后我将以下属性添加到 Polymer 元素:
icon: {
type: String,
value: 'user'
}
按原样运行，甚至不尝试传递不同的值，只是让它使用默认值 'user' ，它无法正确呈现。 DOM 只有这个:
<i class="style-scope widget-iconblock"></i>
我已经尝试了一些其他的东西，包括替换整个 <i>用 {{i}} 标记然后让它返回类似于 "<i class='fa fa-" + self.icon + "'></i>" 的计算值但这呈现了文字。
我做错了什么？
最佳答案
将属性绑定(bind)到 native 属性需要 Polymer's attribute-binding syntax (即，class$="{{prop}}"):
<head>
<base href="https://polygit.org/polymer+1.7.0/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="polymer/polymer.html">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css">
</head>
<body>
<x-foo></x-foo>
<dom-module id="x-foo">
<template>
<i class$="fa fa-{{icon}}"></i>
</template>
<script>
HTMLImports.whenReady(function() {
Polymer({
is: 'x-foo',
properties : {
icon: {
type: String,
value: 'user'
}
}
});
});
</script>
</dom-module>
</body>关于javascript - 将参数传递给 Web 组件以在类中使用失败，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39838881/