Question

在聚合物中，假设我有一个容器元素<x-container>，以及两个子元素<a-child>，<b-child>。在一个元素中，我希望能够指定它包含<a-child>或<b-child>（它永远不会同时包含两者）。

例如，它可能看起来像：

1. <x-container><a-child></a-child></x-container>

，或者

2. <x-container><b-child></b-child></x-container>。

由于<x-container>包含大量代码，我不想复制它，但希望能够使用<x-container>这样的代码：

然后

<x-container type = 'a-child'></x-container>具有与上述第一项相同的行为。我怎么能实现这个功能？

Answer 1

当你掌握了将要获得的信息时，只需实现它即可！

//in your x-container component
observers: ['_typeChanged(type)'],
_typeChanged: function(type) {
    var child = this.create(type);
    Polymer.dom(this.root).appendChild(child);
}

或者你使用一个插槽然后你可以像这样做

父组件

<x-container>
   <template is="dom-if" if="[[_isA()]]"><a-child></a-child></template>
   <template is="dom-if" if="[[_isB()]]"><b-child></b-child></template>
</x-container>

并且在x-container的模板中只需简单地放置一个插槽，子插件将在插槽中呈现

<slot></slot>

如何让聚合物组分含有动态元素？

1 个答案: