Angular 2-锚链接到当前页面上的元素 [英] Angular 2 - Anchor Links to Element on Current Page

问题描述

万一问题标题不清楚，我会在网页上添加一些链接部分，然后有人可以单击该链接并将其带到同一模板上的某个元素。这并不一定意味着更改URL。

In case the question title is unclear, I have a webpage with some section "links," whereupon someone could click the link and be brought to an element on the same template. This does not necessarily mean changing the 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）的一部分的组件路线。

This approach did not work because clicking the link would navigate me to baseUrl/#sectionA (nonexistent route), rather than the route of the component the page was a part of (baseUrl/currentPage#sectionA).

第一种方法失败，我尝试了以下操作：

The first approach failing, I tried the below:

<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（即ID）。

This actually works for the current page, scrolling the user to the section on the currentPage; the issue encountered is when we have a child route using the same component and template. Essentially, navigating to 'baseUrl/currentPage' takes you to an empty form. Were a user to navigate to, for example, 'baseUrl/currentPage/1', we would expect the form to be filled out with data for 1, which is an ID.

我想要的是用户单击此侧面上下文菜单中的锚点以导航到currentPage和currentPage的参数化路线所使用的模板上的某个部分。 （currentPage / 1，currentPage / 31等）。 无关紧要的是在URL中引用模板上的部分。我只关心导航方面对父级及其子级起作用。绝对最好不要使用第三方角度插件。

What I would like is for a user to click an anchor in this side context menu to navigate to a section on the template utilized by both currentPage and the parameterized routes of currentPage (currentPage/1, currentPage/31, etc.). What is not important is that the section on the template be referenced in the URL. I only care that the navigation aspect be functional for the parent and its children. It is definitely preferable to not have to use third-party angular plugins.

非常感谢所有建议和意见。

All suggestions and input are much appreciated.

编辑：
为上下文添加组件路由：

Adding component routes for context:

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

以上路由已导出到主应用程序组件路由：

The above routes are exported to main app.component routing:

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

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

导出路由导入到主app.module中。此外，我在index.html文件中设置了基本href。

Export routing is then imported into main app.module. Additionally, I have set base href in index.html file.

推荐答案

与pe8ter的答案有关，似乎可以通过[还有routerp]

related to pe8ter's answer, seems it can be activated by [routerLink] as well

请看看这是否有帮助使用Hashtag路由到页面锚点的Angular2路由

这篇关于Angular 2-锚链接到当前页面上的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！