指向另一个元素的 href 在 Polymer 中不起作用答案

【问题标题】：href to another element does not work in Polymer指向另一个元素的 href 在 Polymer 中不起作用
【发布时间】：2018-03-08 03:23:39
【问题描述】：

我使用 Polymer Starter Kit 及其应用路由器创建了一个项目。

我的 my-app.html 有这样的视图选择器..

<iron-pages role="main" selected="[[page]]" attr-for-selected="name">
      <my-view1 name="view1"></my-view1>
      <my-view2 name="view2"></my-view2>
      <my-view3 name="view3"></my-view3>
      <my-view4 name="view4"></my-view4>
      <my-view5 name="view5"></my-view5>
      <my-view6 name="view6"></my-view6>
    </iron-pages>

我有一个组件 my-view1.html，其中我有带有 href 标记的 div

<div>God 1 <a href="#gotogod" class="link">Jump to example</a> </div>

在我的文档中的其他地方

<p id="gotogod">
  God is great
</p>

虽然我没有收到任何错误，但当我单击链接时它不会跳转到该段落。当我将鼠标悬停在链接上时，我确实得到了

http://localhost:8080/view1#gotogod

但是页面并没有跳转到那个位置。

我尝试了各种 href 组合但没有运气。

请帮忙。

【问题讨论】：

你在使用 app-route 元素吗？ (elements.polymer-project.org/elements/app-route)
是的。但我需要跳转到一个元素
好的，如果您使用 app-route，我现在就回答如何操作
也许它很笨，但是......你确定页面中有足够的空间让浏览器滚动到目标元素吗？

标签： html polymer href

【解决方案1】：

HTML 元素：

<a on-click="scrollIntoView" section-id="gotogod">

Javascript 函数：

scrollIntoView(e) {
   let sectionId = e.target.getAttribute('section-id');
   this.$[sectionId].scrollIntoView();
}

【讨论】：

【解决方案2】：

好的，你需要注意app-route，当你要改变路由时，你应该通过app-route来改变它。

我是这样做的（有点）：

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

<iron-selector attr-for-selected="route"
               selected="[[ page ]]"
               role="navigation">
    <a route="editor" href="/editor">Editor</a>
    <a route="analyze" href="/analyze">Analyze</a>
    <a route="community" href="/community">Community</a>
</iron-selector>

<iron-pages role="main"
            attr-for-selected="route"
            selected="[[ page ]]">
    <my-editor route="editor"></my-editor>
    <my-analyze route="analyze"></my-analyze>
    <my-community route="community"></my-community>
</iron-pages>

<script>
     Polymer({ 
         is:'my-element',
         properties: {
             page: {
                 type: String,
                 notify: true,
                 reflectToAttribute: true,
                 observer: "_pageChanged"
             }
         },

         observers: [
             "_routePageChanged(routeData.page)"
         ],

         listeners: {
             "requestChangeRoute": "_changeRoute"
         },

         attached: function(e) {
             // Lazyload the views as soon as the AppShell has been Painted
             this.importHref(
                 this.resolveUrl("my-editor.html"), null, null, true);
             this.importHref(
                 this.resolveUrl("my-analyze"), null, null, true);
             this.importHref(
                 this.resolveUrl("my-community"), null, null, true);

             // If the application is reloaded, redirect to /analyze
             if(this.page != "analyze"){
                 this.set("route.path", "/analyze");
             }
         },

         _changeRoute: function(e) {
             this.set("route.path", e.detail.requestRoute);
         },

         _routePageChanged: function(page) {
             this.page = page || "analyze";
         }
     })
</script>

在定义路由的主页上，您可以使用带路由的 href 进行导航，但是当您在某些页面元素中时，如果没有定义 app-route，您应该询问让您的主页使用不带 href 的 _changeRoute 函数通过 app-route 更改路由，此调用如下所示：

this.fire("requestChangeRoute", {
    route: "/editor"
});

通过这种方式，您可以确定 app-route 负责导航，并且每个页面都可以正常工作，您甚至可以设置此函数要传递的验证或参数。

【讨论】：

感谢您的详细回答，但我需要跳转到带有 id 的 div 或带有 id 的页面中的元素（如纸卡）。

【解决方案3】：

看来这个答案就是你要找的： Polymer scroll to a specific div

你可以这样做：

<a href="#gotogod" class="link" on-click="_goToGoScroll">

并且在 Polymer 元素的代码中：

_goToGoScrool() {
  this.$.gotogod.scrollIntoView();
}

【讨论】：