为什么聚合物库中的链接在添加 target="_self" 之前不起作用

Question

我的测试站点是聚合物入门套件（高级版）的一点修改版本

并且在您手动添加 target="_self" 或其他属性之前链接将不起作用，即使：

ripples effect happens when you click the button

as well as link indication appears (the tiny link in the bottom edge of the browser when you hover the button)

按钮的示例代码

<paper-button>
    <a href="{{baseUrl}}contact.html" target="_self">Contact</a>
</paper-button>

我的项目的 app 文件夹中有 bower_components 目录，默认情况下它充满了所有这些元素，但我是否需要在使用之前 bower <component name> install 它或类似的东西或者还有什么可能导致问题？

Answer 1

通常，要在页面上使用 Polymer 元素，该元素应该可以导入到页面中。这通常意味着您将完成几件事：

运行bower install --save-dev <element-name>。运行的确切 Bower 命令可以从 Polymer 元素的 docs page（左下角）复制：

使用 <link> 标签（例如 <link rel="import" href="bower_components/iron-ajax/iron-ajax.html">）将元素导入页面。

Polymer Starter Kit 的优点之一是它 setup includes downloading all Paper Elements 来自 bower（包括 paper-button）。因此，在您的情况下，您 不需要 需要运行 bower install 才能使用 paper-button。您在单击按钮时看到波纹这一事实表明您已经下载了 paper-button 元素并导入了 link。

测试

我刚刚在 index.html 的抽屉里添加了一个 paper-button 和一个无目标 link 的抽屉：

<body unresolved>
...
    <paper-drawer-panel id="paperDrawerPanel">
      <paper-scroll-header-panel drawer fixed>
...
        <paper-menu attr-for-selected="data-route" selected="[[route]]">
...
          <!-- Your code below... -->
          <paper-button>
            <a href="{{baseUrl}}contact">Contact!</a>
          </paper-button>
        </paper-menu>
      </paper-scroll-header-panel>
...
</body>

并且效果很好：

（我们需要更多上下文来确定问题的原因...）

Answer 2

不确定这是否能解决您的问题，但是

要绑定到 href，请使用属性绑定语法

<a href$="{{baseUrl}}contact.html">Contact</a>

否则某些浏览器会在 Polymer 有机会解析绑定并分配计算出的 URL.

之前尝试解析值 "{{baseUrl}}contact.html"

另见本节末尾 https://www.polymer-project.org/1.0/docs/devguide/data-binding.html#property-binding

Some attributes are special. When binding to style, href, class, for or data-* attributes, it is recommend that you use attribute binding syntax. For more information, see Binding to native element attributes.

为什么聚合物库中的链接在添加 target="_self" 之前不起作用

Why links in polymer library doesn't working until you add target="_self"

hyperlink

web-deployment

web-component

polymer

polymer-starter-kit

测试