web-dev-qa-db-ja.com

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

質問のタイトルが不明な場合、「リンク」というセクションがある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/currentPage＃sectionA）ではなく、baseUrl /＃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で参照されることです。ナビゲーションの側面が親とその子に対してのみ機能することだけが重要です。サードパーティのangularプラグインを使用する必要はありません。

すべての提案と入力は大歓迎です。

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

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);

次に、エクスポートroutingがメインapp.moduleにインポートされます。さらに、index.htmlファイルにbase hrefを設定しました。

html5angularroutinganchor
9
Jacob Kochocki

pe8terの回答に関連して、[routerLink]によってもアクティブにできるようです

これが役立つかどうかを確認してください Angular2ハッシュタグをページアンカーにルーティング

1
Jonathan Niu