html - Angular 2 - anchor 链接到当前页面上的元素-6ren

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

转载作者：太空狗更新时间：2023-10-29 13:31:55

<分区>

如果问题标题不清楚，我有一个带有某些“链接”部分的网页，有人可以单击该链接并转到同一模板上的元素。这并不一定意味着更改 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>

这实际上适用于当前页面，将用户滚动到当前页面上的部分；遇到的问题是当我们有一个使用相同组件和模板的子路由时。本质上，导航到“baseUrl/currentPage”会将您带到一个空表单。例如，如果用户导航到“baseUrl/currentPage/1”，我们希望表单填写 1 的数据，这是一个 ID。

我想要的是用户单击此侧面上下文菜单中的 anchor 以导航到 currentPage 和 currentPage 的参数化路由(currentPage/1、currentPage/31 等)使用的模板部分. 不重要的是在 URL 中引用模板部分。我只关心导航方面是否对父项及其子项起作用。最好不要使用第三方 Angular 插件。

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

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

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);

Export routing 然后被导入到主 app.module 中。此外，我在 index.html 文件中设置了 base href。