如何在Polymer3.x中突出显示页面重新加载时选择的routerLink文本？

Question

我正在构建Polymer3音乐应用程序，该应用程序可从公共api获取播放列表。所有播放列表名称都实现为routerLinks。

点击时，playlistName变粗体，但在页面重载上routerroute并没有突出显示（粗体）。

例如：如果我在URL中输入localhost:8081/playlist1，则在重新加载页面时，播放列表1应该为粗体。

谢谢。

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>

    `;
  }

Answer 1

  

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

发生这种情况可能是由于iron-selector元素中存在IronSelectableBehaviour，我认为它应用了粗体样式on-tap。例如，paper-tabs也会发生这种情况。

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

解决方案：

通过URL或点击，您将始终在当前活动项目上拥有iron-selected类。

来自documentation：

  

铁选择器未设置样式。使用iron-selected CSS类进行样式设置   选定的元素。

尝试一下

  <style>
    .iron-selected {
      background: #eee;
    }
  </style>