html - Angular 路由器链接到页面中具有指定 id 的元素

Question

我正在使用 Angular 路由器，我正在尝试通过 id 链接到另一个路由中的子组件。基本上使用 <a href="www.url.com/profile/#profile-header-id"> 通常会做什么.

我不确定 Angular 路由器是否有内置方式来执行此操作，但如果没有，我可以在以后知道元素已被渲染时手动触发链接。

问题不在于链接到另一个路由，这当然是通过来自 Angular 路由器的链接完成的。问题是链接到在链接组件的呈现 HTML 中找到的元素。

更少的抽象代码示例:

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

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

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

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

home.component.html

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

但是，单击按钮 <button routerLink="#section3">Go to homepage section 3</button> 时，我只能看到一个空白页面在 B 页面上。

Answer 1

最优雅的解决方案就是添加一个片段属性，将#section3添加到URL中，然后通过 anchor 标记使其跳转到该部分。

<div [routerLink]="['']" fragment="section3">
<a href="#section3">Jump to 'Section3' anchor </a>
</div>