Angular 2 - 在当前页面上链接到元素的链接

Question

如果问题标题不清楚，我有一个带有“链接”部分的网页，因此有人可以单击链接并将其带到同一模板上的元素。这并不一定意味着更改网址。

什么，我已经试过要点：

<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 /＃部1.（不存在的路线），而不是组件的路线页面是（baseUrl/currentPage＃sectionA）的一部分。

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

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

这实际上适用于当前页面，滚动用户对当前页的部分;遇到的问题是当我们有一个孩子路线使用相同的组件和模板。基本上，导航到'baseUrl/currentPage'将带您到一个空的表单。例如，如果用户导航到'baseUrl/currentPage/1'，我们希望表单中填入1的数据，这是一个ID。

我想让用户点击这个侧面上下文菜单中的一个锚点，导航到当前页面和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文件中设置了基础href。

Answer 1

相关pe8ter的答案，似乎可以通过[routerLink]以及

被激活，请查看是否有助于Angular2 Routing with Hashtag to page anchor