如何在单个聚合物元素中使用多个 <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> 只是显示传递内容的插槽。

如果要提供两次，则需要在至少一个<content> 中添加select=".some"，以定义投影内容的哪一部分（与选择器.some 匹配的部分）应投影到这个<content select=".some"> 以及应该将哪些内容投影到另一个<content> 元素。

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