Question

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

我的html组件：

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

但是它返回我为null，然后转到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]);
    }
  ;
});

Answer 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>

Answer 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',
    })
  ]
})
...

如何滚动到我的角度页面中的锚点

2 个答案: