對另一個元素的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在聚合物中不起作用

回答

相關問題