Question

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

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

问题是没有链接到另一条路线，当然这是通过Angular路由器的Link完成的。问题是链接到链接组件的呈现HTML中的元素。

较少的抽象代码示例：

所以，让我们说app.module.ts文件中的路由器是

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

现在在组件OtherComponent中，我想要一个链接，它不仅带我到主页路由＆＃39; ＆＃39;，但也滚动到id＃section3的元素，从而跳过所有不相关的东西。

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

home.component.html

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

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

Answer 1

最优雅的解决方案是添加一个片段属性，将＃section3添加到URL，然后使用锚标记跳转到此部分。

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

Answer 2

结合使用routerLink指令及其fragment输入属性。

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

使用您的路线，呈现的DOM是

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

请确保已在使用RouterModule指令的组件的声明模块中导入了routerLink。示例：

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 {}

角度路由器链接到页面

2 个答案: