Polymer 如何从角度2对象设置聚合物组件的属性？

我开始使用Angular 2和Polymer，我让它们像预期的那样分开工作，但我很难将它们混合起来。我试图根据角度对象的值设置

铁图标的
图标
属性。这是我的代码，是从教程中的代码修改而来的：

TS文件：

import {Component, View, bootstrap, CORE_DIRECTIVES} from 'angular2/angular2';
@Component({ selector: 'hero-manager' })
@View({
  directives: [CORE_DIRECTIVES],
  templateUrl: "hero/hero.tpl.html",
})
class HeroComponent {
  public hero = {"id": 1, "name": "foo", "icon": "polymer"};
}
class Hero {
  id: number;
  name: string;
  icon: string;
}

bootstrap(HeroComponent);

hero.tpl.html

<link rel="import" href="../bower_components/iron-icons/iron-icons.html">

<div><iron-icon icon="polymer"></iron-icon>{{hero.icon}}</div>
<div><iron-icon [icon]="'polymer'"></iron-icon>{{hero.icon}}</div>
<div><iron-icon icon="{{hero.icon}}"></iron-icon>{{hero.icon}}</div>
<div><iron-icon [icon]="hero.icon"></iron-icon>{{hero.icon}}</div>


{{hero.icon}
{{hero.icon}
{{hero.icon}
{{hero.icon}

我尝试了不同的方法来设置
图标
属性的
polymer
值。只有4行中的第一行可以工作并显示图标。在开发工具中，其他3个工具没有
图标
属性。同时，div中的
{{hero.icon}
被正确地扩展为
polymer

我应该怎么做才能动态设置
图标
属性

编辑：我从@Eric Martinez的评论中复制了这个问题

铁图标导入在模板中，而不是在主html中

编辑2，在@Eric Martinez评论说我应该使用[attr.icon]之后：

新问题：


根据，图标是属性对象中定义的属性。
attr
符号来自哪里？角聚合物和聚合物对什么性质有完全不同的理解

为什么在index.html中完成导入时它会起作用

无法复制，对我来说效果很好，请看这个，谢谢，我想我输入的铁图标放错地方了。多亏了你现在的例子，我才得以工作。你想把它作为答案贴出来，这样我就可以标记出问题已经解决了吗？我不介意，但“你输入了错误的地方”并不是一个很好的答案。我还要补充一点，你的例子有一半的效果，因为它至少显示了其中的一个，所以也许再多做一点调查，你就可以得到一个明确的答案，并将它们导入到你想要的地方：）完成。我不太确定进口产品应该放在哪里。我认为WebComponents的目的是很好地封装东西，因此如果我必须在主html文件中导入其他组件（而不是像我最初尝试的那样在组件的视图文件中），它似乎无法达到目的。我想道歉。。。我完全忘记了这一点：（.
icon
不是
iron icon
的属性，而是一个属性。Angular2默认绑定到属性，但在这种情况下，您应该指定
[attr.icon]
。请参阅。如果我误导了您，很抱歉。无法复制，对我来说很好，请参阅此感谢，我认为我在错误的位置导入了铁图标。由于您的示例，我现在可以正常工作。是否要将其作为答案发布，以便我标记问题已解决？我不介意，但“您导入了错误的位置”这不是一个完全正确的答案。我还要补充一点，您的示例有一半的效果，因为它至少显示了其中的一个，因此，也许通过更多的调查，您可以得到一个明确的答案，并将其导入到您想要的地方：）完成。我不太确定进口产品应该放在哪里。我认为WebComponents的目的是很好地封装东西，因此如果我必须在主html文件中导入其他组件（而不是像我最初尝试的那样在组件的视图文件中），它似乎无法达到目的。我想道歉。。。我完全忘记了这一点：（.
icon
不是
iron icon
的属性，而是一个属性。Angular2默认绑定到属性，但在这种情况下，您应该指定
[attr.icon]
。如果我误导了您，请参阅。抱歉。