他の要素へのhrefはポリマーでは機能しません

Question

私は、そのアプリケーションルータを備えたPolymer Starter Kitを使ってプロジェクトを作成しました。

私の私の-app.htmlは、私がHREFタグでDIVている内のコンポーネント私-view1.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> 

...そうのような景色のためのセレクタがあり

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

他の場所で、私はすべてのエラーを取得いけないが、それは段落にジャンプdoes notの

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

を持っている文書で私はリンクをクリックします。リンク上にカーソルを合わせると、私は何をするのですか？

http://localhost:8080/view1#gotogod 

しかし、ページはその場所にジャンプしません。

私はhrefのために様々な組み合わせを試みました。

助けてください。

Answer 1

あなたはアプリルートについて注意する必要があります。ルートを変更する場合は、アプリルートで変更する必要があります。

私は（一種の）このようにそれを行う：ルートが定義されているメインページで、

<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がナビゲーションを処理していることと、すべてのp年齢が機能し、この関数によって渡されるバリデーションやパラメータを設定することさえできます。

Answer 2

この答えはあなたが何を見ているようだ： Polymer scroll to a specific div

あなたが行うことができます。

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

とポリマー要素のコードで：

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

Answer 3

HTML要素：

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

javascript関数：

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