如何基于URL对聚合物元素执行select(）方法

How to execute select() method on polymer elements based on URL?

本文关键字：select 方法 执行 元素 何基于 URL 聚合物      更新时间：2023-09-26

我有一个带链接的纸质菜单

<paper-menu>
  <a href="/home">Home</a>
  <a href="/about">About</a>
</paper-menu>

当我点击任何链接时，Polymer都会向其中添加一个.iron选择的CSS类，但如果发生页面重新加载或页面重定向，我就会丢失该CSS类。

我的问题是：我如何做聚合物添加基于URL的类？

您可以在这里看到一个工作示例

当您转到"cekuda"页面时，会选择cekuda菜单项，当您转到"jegano"页面时，会选择jegano菜单项。

  • 使用全局变量"location"来检查页面的url
  • 等待"WebComponentsReady"事件启动后，再尝试对纸质菜单执行任何操作
  • 通过纸质菜单项分析纸质菜单子项
  • 将类添加到要使用paper-enu选择的元素中。选择

谢谢你的提示Ryan！

我的解决方案是：

document.addEventListener('WebComponentsReady', function(){
    var menu = document.querySelector('paper-menu')
    var paths = menu.items.map(function(item){
        return item.pathname
    })
    window.setInterval(function () {
        menu.select(paths.indexOf(location.pathname))
    }, 100);
})
相关文章：