Question

如果问题标题不清楚，我的网页上有一些部分＆＃34;链接，＆＃34;然后有人可以点击链接并将其带到同一模板上的元素。这并不一定意味着更改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。

Answer 1

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

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

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

1 个答案: