Question

我开始使用Angular 2和Polymer，我让它们按预期单独工作，但我无法将它们混合起来。我正在尝试从Angular对象的值设置icon的{{1}}属性。这是我的代码，修改自教程中的代码：

TS文件：

iron-icon

hero.tpl.html

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);

我尝试了不同的方法为<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>属性设置polymer值。只有4行中的第一行才能工作并显示图标。在开发工具中，其他3个属性没有icon属性。同时，div中的icon已正确扩展为{{hero.icon}}。

我应该怎样做才能动态设置polymer属性？

编辑：我在此plunker中重现了这个问题，源于@Eric Martinez的评论。

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

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

新问题：

根据iron-icon's sources，图标是属性对象中定义的属性。 icon符号来自哪里？ Angular和Polymer对什么属性应该有完全不同的理解？
为什么在index.html中完成导入后才能正常工作？

如何从Angular 2对象设置Polymer组件的属性？

0 个答案: