Angular Routing 在导航后删除 Route Fragment答案

【问题标题】：Angular Routing remove Route Fragment after navigationAngular Routing 在导航后删除 Route Fragment
【发布时间】：2020-01-09 01:27:55
【问题描述】：

导航到 Route+Fragment 后，如何删除 Angular 路由片段？

使用我当前的设置，路由片段 (http://address/#[fragment]) 成为导航 URL 的一部分，防止滚动到页面上不同部分的用户再次使用路由+片段。这是因为 URL 已经处于“跳转到”状态。例如。 http://localhost:4200/home#shop。

用户使用“跳转到”路由后，URL 应从 http://localhost:4200/home#shop 更改回 http://localhost:4200/home

我当前的代码

这是一个“跳转”路由器链接：

<a [routerLink]="['/home']" fragment="shop">shop</a>

在我的 routing-module.ts 中：

imports: [RouterModule.forRoot(routes, {
    scrollPositionRestoration: 'enabled',
    anchorScrolling: 'enabled',
    scrollOffset: [0, 64]
})],

提前谢谢你！

【问题讨论】：

标签： angular

【解决方案1】：

您可以尝试使用来自@angular/common 的位置。

import { Location, LocationStrategy, PathLocationStrategy } from '@angular/common';

constructor(
   private location: Location
) { }

ngOnInit() {
   // replaceState(path: string, query: string = '', state: any = null): void
   this.location.replaceState(pathWithoutHash);
}

您也可以稍等片刻，然后超时删除片段。

The docs

【讨论】：

感谢您的解决方案。它非常适合更改 URL。我遇到的一个警告是，它不能解决为用户启用“跳转到”路由片段（URL/home#shop）第二次使用“跳转到”的问题。任何建议都会很棒
也许尝试在您的链接中添加条件。例如private allowFragment: boolean; 并在您的链接中[fragment]="allowFragment ? 'shop' : ' ' "。