Html 角度路由器链接到页面中具有指定id的元素

我正在使用Angular Router，我正在尝试通过id链接到另一个路由中的子组件。基本上使用

通常会做什么

我不确定是否有内置的方式让Angular router实现这一点，但如果没有，也许我可以在稍后知道元素已渲染时手动触发链接

问题不是链接到另一条路由，当然是通过角度路由器的链接完成的。问题是链接到链接组件的呈现HTML中的元素

不太抽象的代码示例：

假设app.module.ts文件中的路由器是

`const routes = [
  { path: '', component: HomeComponent},  
  { path: '#section3', component: HomeSection3Component}, 
  { path: 'B', component: BComponent}, 
];`

现在在component OtherComponent中，我需要一个链接，它不仅可以将我带到主页路径“”，还可以滚动到id#Section 3的元素，从而跳过所有不相关的内容

“我的主页”组件对页面的每个部分都有嵌套的组件。每个部分/组件都有一个id

home.component.html

`<main>
     <app-section1></app-section1>
     <app-section2></app-section2>
     <app-section3></app-section3>
</main>`

`
`

---

但是，当单击B页上的按钮“转到主页第3节”时，我只能看到一个空白页。

最优雅的解决方案就是添加一个片段属性，将第3节添加到URL，然后使用锚定标记将其跳转到此节

---

将

routerLink

指令与其

片段

输入属性结合使用

<a routerLink fragment="section3">Section 3</a>

---

您是否尝试了

path:'/#section3'

在路由中使用片段，并使用普通的老javascript方式滚动到视图中。她是一个更详细的例子，感谢它不起作用，但它很容易创建以下方式的链接：

<a href="/#section3">Section 3</a>

import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';

@NgModule({
  declarations: [
    HomeComponent,
    HomeSection1Component
    HomeSection2Component,
    HomeSection3Component,
  ],
  imports: [
    CommonModule,
    RouterModule,
  ],
})
export class HomeModule {}