Polymer纸张元素属性和Angular

Question

3

我正在使用Angular和Google Polymer纸质元素。这很好，但是我在属性方面遇到了问题。虽然这样可以工作：

<paper-card>{{someVarFromComponent}}</paper-card>

这个不会：

<paper-card heading="{{someVarFromComponent}}"></paper-card>

someVarFromComponent 是我组件中的一个变量。似乎将变量提供给模板在参数中不起作用。或者说对于polymer组件来说，在参数中不起作用？

当我的组件变量someVarFromComponent改变时，我需要改变<paper-card>中heading属性的内容。

是否有解决这个问题的方案或变通方法？

- Witek

2

为了让Polymer与Angular正常工作，可能需要启用完整的Shadow DOM。请参考https://www.polymer-project.org/1.0/docs/devguide/settings.html。 - Günter Zöchbauer

这对我有效plnkr。（虽然我不熟悉聚合物，但我认为它正在工作）。 - Eric Martinez

你能添加更多的代码吗？你是如何定义someVarFromComponent的？ - Dmytro

你能提供更多信息，以便我们更好地回答你的问题并给出它应有的答案吗？ - SnareChops

2个回答

0

尝试这个 <paper-card [heading]="someVarFromComponent"></paper-card>

- jeff

这根本不起作用。标题始终为空。即使我在声明时使用文本初始化 someVarFromComponent。 - Witek

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- SnareChops · Accepted Answer

正如Günter在他的评论中所述，很可能需要开启完全的Shadow DOM支持才能使用angular2。默认情况下，这是未启用的。可以通过使用以下方式来启用Shadow DOM：

<script>
    window.Polymer = window.Polymer || {};
    window.Polymer.dom = 'shadow';
</script>

在你的 index.html 文件的 <head> 中，或者可以在你的启动 js 文件中不使用 <script> 标签（最好是第一段被执行的代码）。