对另一个元素的href在聚合物中不起作用

我使用Polymer Starter Kit及其应用程序路由器创建了一个项目。对另一个元素的href在聚合物中不起作用

我的我的，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没有运气。

请帮忙。

来源

2016-09-05 Natraj Ram

你使用的应用程序，路线元素？（https://elements.polymer-project.org/elements/approuter） – MarioAleo

是的。但我需要跳转到一个元素 –

好的，如果您使用的应用程序路由我现在将我的答案放在如何做 – MarioAleo

好的，您需要对应用路由保持警惕，当您要更改路由时，应该通过应用路由对其进行更改。

我这样做（种）这样说：

<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与路线导航，但是当你里面的一些您的页面元素，如果没有定义应用路径，您应该要求您使用不带href的函数_changeRoute通过应用路由更改路由，此调用如下所示：

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

这样你就可以确定应用程序路线正在照顾导航，并且每个p年龄将会起作用，并且您甚至可以设置通过此功能传递的验证或参数。

来源

2016-09-06 13:22:51 MarioAleo

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

看来，这个答案是你找什么： Polymer scroll to a specific div

你可以这样做：

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

和聚合物元素的代码：

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

来源

2017-04-24 09:06:26

HTML元素：

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

JavaScript函数：

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

来源

2018-03-07 19:23:39 TomWay

对另一个元素的href在聚合物中不起作用

回答

相关问题