html - 我如何在我的 Angular 页面中滚动到锚点

我想在我的 Angular 页面中创建锚点，但它不起作用，我也不知道为什么。

我的 HTML 组件：

<h1 id="choose_package">Step 1 : choose a package</h1>
<div>Some elements</div>
<a [href]="choose_package">test</a>

但它返回我空值并跳转到404页面。

编辑（现在我可以滚动了，但它不是一点一点完成的）：

this.router.events.pipe(filter(e => e instanceof Scroll)).subscribe((e: any) => {
    if (e.position) {
      this.viewportScroller.scrollToPosition(e.position);
    } else if (e.anchor) {
      this.viewportScroller.scrollToAnchor(e.anchor);
    } else {
      this.viewportScroller.scrollToPosition([0, 0]);
    }
  ;
});

答案＃1

在 v6.1.0 中，锚点滚动默认被禁用。在路由配置中启用锚点滚动

@NgModule({
  imports: [
    RouterModule.forRoot(routes, {
      anchorScrolling: 'enabled',
    })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule {}

然后使用碎片

<h1 id="choose_package">Step 1 : choose a package for your license</h1>
<div>Some elements</div>
<a [fragment]="choose_package">test</a>

答案＃2

使用 Fragment 来做这件事。

<h1 id="choose_package">
Step 1 : choose a package for your license
</h1>
<div>Some elements</div>
<a [fragment]="choose_package">test</a>

它将在同一页上重定向到“choose_package”。

你还需要在你的 rootModule 中定义 anchorScrolling

...
@NgModule({
  imports: [
    RouterModule.forRoot(routes, {
      anchorScrolling: 'enabled',
    })
  ]
})
...