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中将它们与index分开添加。但是在索引中它应该写一次，如下所示。

   <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>正在执行此操作

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

1 个答案: