角2 - アンカーリンク現在のページの要素へのリンク

Question

質問のタイトルが不明な場合は、いくつかのセクション「リンク」を持つWebページがあり、誰かがリンクをクリックして同じテンプレートの要素に移動できるようになりました。これは必ずしもURLの変更を意味するものではありません。

私が試したものの要旨：

<a href="#sectionA>Section A</a> 
<a href="#sectionB>Section B</a> 
<a href="#sectionC>Section C</a> 
<br/> 
<div id="sectionA"> 
    <p> Content for A </p> 
</div> 
<div id="sectionB"> 
    <p> Content for B </p> 
</div> 
<div id="sectionC"> 
    <p> Content for C </p> 
</div> 

リンクをクリックすると、むしろコンポーネントのルートよりも、baseUrlに/＃sectionA（存在しないルート）に私をナビゲートしますので、このアプローチは動作しませんでしたページは（baseUrl/currentPage＃sectionA）の一部でした。

最初のアプローチ失敗は、私は、以下の試み：

<a href="currentPage#sectionA>Section A</a> 
<a href="currentPage#sectionB>Section B</a> 
<a href="currentPage#sectionC>Section C</a> 

をこれは実際currentPageに上のセクションにユーザーをスクロール、現在のページのために働きます。遭遇する問題は、同じコンポーネントとテンプレートを使用する子ルートがある場合です。本質的には、 'baseUrl/currentPage'にナビゲートすると空のフォームになります。ユーザーが 'baseUrl/currentPage/1'などに移動した場合は、フォームにIDの1のデータを入力する必要があります。

このサイドコンテキストメニューのアンカーをクリックして、currentPageとcurrentPageのパラメータ化されたルート（currentPage/1、currentPage/31など）の両方で利用されるテンプレートのセクションに移動します。 ）。 重要ではないことは、テンプレートのセクションがURLで参照されることです。私は、ナビゲーションの側面が親とその子のために機能することだけを気にします。サードパーティ製アングルプラグインを使用しないでください。

すべての提案と入力を非常に感謝しています。

編集： コンテキストのコンポーネントルートを追加：

export const CurrentComponentRoutes: Route[] = [ 
    { 
    path: 'currentPage', 
    component: CurrentComponent 
    }, 
    { 
    path: 'currentPage/:ID', 
    component: CurrentComponent 
    } 
]; 

上記ルートは主app.componentルーティングに輸出されている：

export const appRoutes: Routes = [ 
    ...CurrentComponentRoutes, 
    ...OtherRoutes 
]; 

export const routing: ModuleWithProviders = RouterModule.forRoot(approot); 

エクスポートは、メインアプリケーションにインポートされるルーティング。モジュール。また、index.htmlファイルにbase hrefを設定しました。 pe8terの答えに関連

Answer 1

、

それは同様[routerLink]によって活性化することができるようだ（[このナビゲーションオプション]これはAngular2 Routing with Hashtag to page anchor