如果问题标题不清楚,我有一个带有某些“链接”部分的网页,因此有人可以单击该链接并转到同一模板上的元素。这并不一定意味着更改 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。
我希望用户单击此侧面上下文菜单中的锚点以导航到 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。