html - 如何滚动到 Angular 页面中的 anchor

标签 html angular typescript anchor

<分区>

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

我的 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]);
    }
  ;
});

最佳答案

锚定滚动在 v6.1.0 中默认禁用。 在路由配置中启用 anchor 滚动

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

关于html - 如何滚动到 Angular 页面中的 anchor ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54180914/

相关文章:

typescript - 如何将角度分量传递给星云对话服务

TypeScript 安装/版本错误 : The term 'tsc' is not recognized

javascript - 在javascript中使用字符串作为 map 的KEY

javascript - 简单的移动javascript Accordion

javascript - AngularFire 2 - FirebaseApp 与 FirebaseRef

angular - 如何在 Angular 9 中使用 @ViewChild 引用通过字符串标记定义的提供者,并将字符串标记用作选择器?

typescript - 在 typescript 和 webpack 项目中使用外部库

javascript - 图像作为单选按钮

html - 在 Reactstrap 中更改卡片高度

javascript - 以 Angular 将数据从一个组件传递到另一个组件