Html Angular 2 - 当前页面上元素的锚链接
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/40404257/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular 2 - Anchor Links to Element on Current Page
提问by Jacob Kochocki
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.
如果问题标题不清楚，我有一个包含“链接”部分的网页，因此有人可以单击该链接并被带到同一模板上的元素。这并不一定意味着更改 URL。
The gist of what I've tried:
我尝试过的要点：
<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>
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).
这种方法不起作用，因为单击链接会将我导航到 baseUrl/#sectionA（不存在的路由），而不是页面所属的组件的路由（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>
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 上的部分；遇到的问题是当我们有一个使用相同组件和模板的子路由时。本质上，导航到“baseUrl/currentPage”会将您带到一个空表单。例如，如果用户导航到“baseUrl/currentPage/1”，我们希望表单填写数据为 1，这是一个 ID。
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.
我希望用户单击此侧上下文菜单中的锚点以导航到 currentPage 和 currentPage 的参数化路由（currentPage/1、currentPage/31 等）使用的模板上的部分。 不重要的是在 URL 中引用模板上的部分。我只关心导航方面是否对父级及其子级起作用。最好不要使用第三方 angular 插件。
All suggestions and input are much appreciated.
非常感谢所有建议和意见。
Edit: 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:
以上路由导出到主 app.component 路由：
export const appRoutes: Routes = [
...CurrentComponentRoutes,
...OtherRoutes
];
export const routing: ModuleWithProviders = RouterModule.forRoot(approot);
Export routingis then imported into main app.module. Additionally, I have set base href in index.html file.
然后将导出路由导入到主 app.module 中。此外，我在 index.html 文件中设置了 base href。
回答by Jonathan Niu
related to pe8ter's answer, seems it can be activated by [routerLink] as well
与 pe8ter 的回答有关，似乎它也可以通过 [routerLink] 激活
please see if this helps Angular2 Routing with Hashtag to page anchor
