Как выделить выделенный текст routerLink при перезагрузке страницы в Polymer3.x? - PullRequest
Новая
       40

Как выделить выделенный текст routerLink при перезагрузке страницы в Polymer3.x?

0 голосов
/ 25 августа 2018

Я создаю музыкальное приложение Polymer3, которое извлекает плейлисты из общедоступного API. Все playlistNames реализованы в виде routerLinks.

При нажатии playlistName становится жирным, но при перезагрузке страницы routerLink не подсвечивается (полужирный).

Например: если я ввожу localhost:8081/playlist1 в URL, то playlist1 должен быть выделен жирным шрифтом при перезагрузке страницы.

Заранее спасибо.

routerLinks not highlighted

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>

    `;
  }

1 Ответ

0 голосов
/ 27 августа 2018

При нажатии, playlistName становится жирным, но на странице перезагрузите routerLink не выделен (жирный).

Это происходит, вероятно, из-за IronSelectableBehaviour , присутствующего в элементе iron-selector, который, я считаю, применяет жирный стиль on-tap. Это также происходит, например, для paper-tabs.

Итак, жирный стиль применяется, потому что вы нажимаете на элемент. Однако, если вы переходите на страницу непосредственно через URL-адрес, вы фактически не щелкаете по элементу, поэтому вы не получаете такое же поведение.

Решение:

У вас всегда будет класс iron-selected для текущего активного элемента, будь то через URL или при нажатии.

Из документации :

железо-селектор не стилизован. Используйте CSS-класс iron-selected для стиля выбранный элемент.

Попробуй 

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