如何在单个聚合物元件中使用多个<content>标签？

Question

我想在单个元素中访问两次相同的数据，一个用于桌面导航，另一个用于响应式导航（抽屉工具栏）。为此，我使用两个内容标签，但只需要一个。在这这种情况下怎么办

<app-drawer-layout force-narrow> 

    <app-drawer id="drawer"> 

    <app-toolbar></app-toolbar> 

    <!-- Nav on mobile: side nav menu --> 
    <paper-menu selected="{{selected}}" attr-for-selected="name"> 
     <template is="dom-repeat" items="{{items}}"> 
     <paper-item name="{{item}}">{{item}}</paper-item> 
     </template> 
    </paper-menu> 

    </app-drawer> 

    <app-header-layout> 
    <app-header class="main-header"> 

     <app-toolbar> 
     <paper-icon-button class="menu-button" icon="menu" drawer-toggle hidden$="{{wideLayout}}"></paper-icon-button> 
     </app-toolbar> 

     <app-toolbar class="tabs-bar" hidden$="{{!wideLayout}}"> 
     <!-- Nav on desktop: tabs --> 
     <paper-tabs selected="{{selected}}" attr-for-selected="name" bottom-item> 
      <template is="dom-repeat" items="{{items}}"> 
      <paper-tab name="{{item}}">{{item}}</paper-tab> 
      </template> 
     </paper-tabs> 
     </app-toolbar> 

    </app-header> 
    </app-header-layout> 

</app-drawer-layout> 

<iron-media-query query="min-width: 600px" query-matches="{{wideLayout}}"></iron-media-query> 

聚合物代码：

Polymer({ 
    is: 'x-app', 
    properties: { 
    selected: { 
     type: String, 
     value: 'Item One' 
    }, 
    wideLayout: { 
     type: Boolean, 
     value: false, 
     observer: 'onLayoutChange', 
    }, 
    items: { 
     type: Array, 
     value: function() { 
     return ['Item One', 'Item Two', 'Item Three', 'Item Four']; 
     } 
    } 
    }, 
    onLayoutChange: function(wide) { 
    var drawer = this.$.drawer; 
    if (wide && drawer.opened) { 
     drawer.opened = false; 
    } 
    } 
}); 

我有这种类型的代码。我应该如何添加菜单元素而不使用数组。我想在app-header和app-drawer中将它们与索引分开添加。但是在索引中它应该写一次，如下所示。

<wt-header logo="logo url" enable-menu="true" enable-topbar="false"> 
     <wt-menu> 
     <wt-tab name="TabName" action="http://example.com/action" /> 
     <wt-tab name="TabName1" action="http://example.com/action2" /> 
     <wt-tab name="TabName3" action="http://example.com/action3" /> 
     </wt-menu> 
    </wt-header> 

Answer 1

我认为你需要提供两次。 <content>不会“产生”你传递给元素的内容，它只是投影内容 - <content>只是显示传递内容的插槽。

如果要提供两次，那么你需要一个select=".some"添加到至少一个<content>定义应突出哪些投影内容（即选择.some相匹配的）的一部分，该<content select=".some">什么内容应该投射到其他<content>元素。

另一种方法是传递<template>...</template>中的内容，然后使用templatizer多次附加模板的内容。这是例如如何<template is="dom-repeat">或<iron-list>这样做