如何在單個聚合物元件中使用多個<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>這樣做