Angular 2 - Якорные ссылки на элемент на текущей странице

Question

Если название вопроса неясно, у меня есть веб-страница с некоторым разделом "ссылки", после чего кто-то может щелкнуть ссылку и перейти к элементу в том же шаблоне. Это не обязательно означает изменение 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", мы ожидаем, что форма будет заполнена данными для 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);

Экспортная маршрутизация затем импортируется в основной app.module. Кроме того, я установил базовый href в файле index.html.

Answer 1

Похоже на ответ pe8ter, кажется, он также может быть активирован [routerLink]

пожалуйста, посмотрите, поможет ли это Angular2 Routing with Hashtag для привязки страницы