如果问题标题不清楚,我的网页上有一些部分"链接,"然后有人可以点击链接并将其带到同一模板上的元素。这并不一定意味着更改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。
答案 0 :(得分:1)
与pe8ter的答案有关,似乎也可以通过[routerLink]激活