0

我正在构建一个 Polymer3 音乐应用程序，它从公共 api 获取播放列表。所有的 playlistNames 都被实现为 routerLinks。

单击时，playlistName变得粗体，但在页面重新加载时 routerLink 未突出显示（粗体）。

例如：如果我localhost:8081/playlist1在 URL 中输入，那么 playlist1 在页面重新加载时应该是粗体。

提前致谢。

routerLinks 未突出显示

static get template() {
    return html `

      <app-location route="{{route}}" url-space-regex="^[[rootPath]]">
      </app-location>

      <app-route route="{{route}}" pattern="[[rootPath]]:page" data="{{routeData}}" tail="{{subroute}}">
      </app-route>

      <app-drawer-layout fullbleed="" narrow="{{narrow}}">
        <!-- Drawer content -->
        <app-drawer id="drawer" slot="drawer" swipe-open="[[narrow]]">
          <app-toolbar>Menu</app-toolbar>
          <iron-selector selected="[[page]]" attr-for-selected="name" class="drawer-list" role="navigation">
            <template is="dom-repeat" items="[[playlists]]">
              <a name="[[item.name]]" href="[[rootPath]][[item.name ]]">[[item.name]]</a>
            </template>
          </iron-selector>
        </app-drawer>

    `;
  }

4

1 回答 1

0

单击时，播放列表名称变得粗体，但在页面重新加载时 routerLink 未突出显示（粗体）。

发生这种情况可能是因为元素中存在IronSelectableBehaviouriron-selector，我相信它适用于粗体样式on-tap。例如，这也会发生paper-tabs。

因此，由于您正在点击该项目，因此正在应用粗体样式。但是，如果您直接通过 URL 访问页面，您实际上并没有点击该项目，这就是您没有获得相同行为的原因。

解决方案：

无论是通过 URL 还是点击，您将始终拥有iron-selected当前活动项目的课程。

从文档中：

铁选择器没有样式。使用iron-selectedCSS 类来设置所选元素的样式。

试试看

  <style>
    .iron-selected {
      background: #eee;
    }
  </style>
于 2018-08-27T12:05:19.703 回答