angular - 如何在 Angular 2.0 中使用 iron-list

Question

我正试图让 iron-list 在 Angular 2.0 中工作。我已经在使用其他 Polymer 1.0 组件，但 iron-list 非常依赖 Light DOM。我知道我可以删除 并且只删除 *ng-for 列表中的内容，但我认为这不会很好地工作。任何人都有任何想法。

Answer 1

这里的问题是 Angular 2 解析 <template>元素，尽管它们应该留给内部的 Polymer Templatizer <iron-list> .

根据我的经验，处理这种情况的最佳方法是包装 <iron-list>在自定义 Polymer 元素中，并在那里定义模板。

<dom-module id="heroes-list">
  <template>
    <style>
      :host {
        display: block;
      }
    </style>
    <iron-list items="[[items]]" selection-enabled selected-item="{{selectedItem}}">
     <template>[[item]]</template>
    </iron-list>
  </template>
  <script>
    Polymer({
      is: 'heroes-list',

      properties: {
        items: {
          type: Array
        },

        selectedItem: {
          type: Object,
          notify: true
        },
      }
    });
  </script>
</dom-module>

此元素然后可以在任何具有双向绑定(bind)的 Angular 2 应用程序中使用，如下所示:

<heroes-list [items]="heroes" (selected-item-changed)="myHero=$event.detail.value">