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的数据填写表单,这是一个ID.

我想要的是用户单击此侧上下文菜单中的锚点以导航到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.另外,我在index.html文件中设置了基本href.

Answer 1

与pe8ter的答案相关，似乎它也可以通过[routerLink]激活

请看看这是否有助于Angular2 使用主题标签路由到页面锚点