Question

我想在URL中添加哈希以转到特定部分。我的代码是到达该页面上的客户部分

<a href="#customer">Customers</a>

当我单击此链接时，URL将如下更新。

http://www.example.com#customer

但是Angular 7在几秒钟后会在URL中的哈希号之前添加斜杠/，URL将会变成这样。

http://www.example.com/#customer

但是即使更新斜线页面也保持不变。

问题是当我尝试再次单击“ Cutomers”链接时，URL为 http://www.example.com#customer

因此，URL失配将在此处发生，因为当我第二次单击时，哈希之前没有斜杠。因此它会重新加载页面

如何防止在7号角的哈希之前添加斜杠

Answer 1

默认情况下，Angular Router（v.6.1.0之后）不启用锚滚动。

您可以这样导入RouterModule来启用它：

RouterModule.forRoot(routes, {
  scrollPositionRestoration: 'enabled',
  anchorScrolling: 'enabled'
})

文档：https://angular.io/api/router/ExtraOptions#anchorScrolling

您的锚点将是div的ID。

用法

HTML：

<a [routerLink]="['somepath']" fragment="customer">Jump to 'customer' anchor </a>

TS：

 this.route.fragment.subscribe(f => {
    console.log("f ", f);
    const element = document.querySelector("#" + f)
    if (element) element.scrollIntoView()
  });

其他解决方案。

您可以使用动态滚动。

<div #customer>Customers</div> <button (click)="scrollToElement(customer)">Scroll</button>。

在您的ts文件中：

scrollToElement(el) {
    el.scrollIntoView();
}

或使用ViewChild：

 @ViewChild("customer") customerElement: ElementRef;

this.customerElement.nativeElement.scrollIntoView({ behavior: "smooth", block: "start" });

或使用一些有角度的librarie，例如： https://www.npmjs.com/package/@nicky-lenaers/ngx-scroll-to

防止在Angular 7中的哈希之前添加斜杠

1 个答案: