Angular 2 - 当前页面上元素的锚点链接

时间:2016-11-03 14:33:48

标签: html5 angular routing anchor

如果问题标题不清楚,我的网页上有一些部分"链接,"然后有人可以点击链接并将其带到同一模板上的元素。这并不一定意味着更改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上的部分;遇到的问题是我们有一个使用相同组件和模板的子路由。基本上,导航到&#39; baseUrl / currentPage&#39;带你到一个空的表格。如果用户导航到例如&#39; baseUrl / currentPage / 1&#39;,我们希望用1的数据填写表单,这是一个ID。

我想要的是用户在此侧面上下文菜单中单击锚点以导航到currentPage和currentPage的参数化路径(currentPage / 1,currentPage / 31等)使用的模板上的部分。 重要的是,在网址中引用模板上的部分。我只关心导航方面是否适用于父级及其子级。绝对不必使用第三方角度插件。

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

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

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。

1 个答案:

答案 0 :(得分:1)

与pe8ter的答案有关,似乎也可以通过[routerLink]激活

请查看这是否有助于Angular2 Routing with Hashtag to page anchor