我正在使用Angular 6项目，其中我已禁用/删除了哈希位置策略，从而从URL中删除了#。
由于这个改变，链接上有：
<li routerLinkActive="active">
<a [routerLink]="['/settings']">Contact Settings</a>
<ul class="child-link-sub">
<li>
<a href="#contactTypes">Contact Types</a>
</li>
</ul>
</li>
不再工作，它只是跳过当前组件的URL，并在localhost后面放置#contactTypes。
我发现了这个github问题，应该可以解决这个问题。
<a [routerLink]="['/settings/']" fragment="contactTypes" >Contact Types</a>
这会将 #contactTypes 放在 URL 的末尾，但它不会滚动到浏览器的顶部。
Angular 6.1提供了一个名为anchorScrolling的选项，它位于路由器模块的ExtraOptions中。根据anchorScrolling的定义：
配置是否应在url具有片段时滚动到该元素。
'disabled'-- 什么都不做（默认）。
'enabled'-- 滚动到元素。 这个选项将来将成为默认值。在“popstate”上不会发生锚点滚动。 相反，我们恢复存储的位置或滚动到顶部。
您可以像这样使用它：
const routerOptions: ExtraOptions = {
useHash: false,
anchorScrolling: 'enabled',
// ...any other options you'd like to use
};
// then just import your RouterModule with these options
RouterModule.forRoot(MY_APP_ROUTES, routerOptions)
我在寻找一个类似的解决方案，并尝试使用ngx-scroll-to包，发现它在最新版本的 Angular 中无法正常工作，所以决定寻找其他选项并发现可以使用scrollIntoView
HTML 代码：
<button (click)="scrollToElement(target)"></button>
<div #target>Your target</div>
Ts 代码:
scrollToElement($element): void {
console.log($element);
$element.scrollIntoView({behavior: "smooth", block: "start", inline: "nearest"});
}
achorScrolling功能还没有推出。自从Angular 6.1后发布，这个解决方案可能对那些使用旧版本Angular的人有所帮助。随着每个新版本的Angular的推出，解决方案也在不断发展，这是非常好的。 - Joel Joseph这对我来说有效（我正在使用Angular 12.1.3）：
在HTML模板上：
<a (click)="scrollTo('anchorId')">Scroll to another position</a>
scrollTo(element: any): void {
(document.getElementById(element) as HTMLElement).scrollIntoView({behavior: "smooth", block: "start", inline: "nearest"});
}
<div id="anchorId"> - MeerArtefakt出于无障碍性的考虑，我必须在文档开头添加一个链接，以便屏幕阅读器用户可以直接访问内容，并跳过页面中反复出现的部分。
由于我需要该链接保持可聚焦（最好保留href属性），而实际上它位于app-root或任何组件之外（但解决方案仍有效于组件内），为此我使用了简单的传统HTML和JavaScript：
<a href="./#content"
onclick="event.preventDefault(); location.hash='content';"
class="content-shortcut"
title="Access page content directly"
i18n-title
aria-label="Access page content directly"
i18n-label>Access page content directly</a>
<style>
.content-shortcut {
position: absolute;
opacity: 0;
height: 0px;
font-size: 1px;
}
.content-shortcut:focus,
.content-shortcut:active {
position: relative;
opacity: 1;
height: auto;
font-size: 1em;
display: block;
color: black;
background: white;
}
</style>
这是针对Angular 9的，但我相信整个社区都会受益于此。
您可以在@angular/common中使用Location来获取当前路径。
假设您有以下带有id的元素需要聚焦
<div id="bring-me-to-the-focus">
这里仅显示提取的代码块。
import { Location } from '@angular/common';
constructor(private location: Location) { }
this.location.path() + '#bring-me-to-the-focus';
anchorScrolling和onSameUrlNavigation功能。 - giovannipdsonSameUrlNavigation，那么仅使用routerLink来进行哈希锚只能起作用。
绕过这个问题的方法是，在您的*.component.ts文件中使用this.router.navigate代替routerLink，并加上fragment参数：
HTML -
<a (click)="scrollToContactTypes()">Contact Types</a>
TypeScript -
constructor(private router: Router) { }
scrollToContactTypes() {
this.router.onSameUrlNavigation = "reload";
this.router.navigate(["/settings"], { fragment: "contactTypes" }).finally(() => {
this.router.onSameUrlNavigation = "ignore"; // Restore config after navigation completes
});
}
onSameUrlNavigation = "reload" ，那么这是一个有趣的答案，我不知道。 - giovannipds使用ngx page scroll插件
<a pageScroll href="#awesomePart">Take me to the awesomeness</a>
<h2 id="awesomePart">This is where the awesome happens</h2>
forRoot里添加 anchorScrolling: 'enabled'。 - SantoshforRoot中添加anchorScrolling: 'enabled'。 - undefined你需要使用哈希路由策略来启用哈希滚动。
你需要将第二个参数作为一个对象传递，例如RouterModule.forRoot([],{useHash:true}})。这样就可以正常工作了。
onSameUrlNavigation: 'reload'选项。 - Nitin AvulaanchorScrolling: 'enabled'，onSameUrlNavigation: 'reload'，scrollPositionRestoration: 'enabled'。 - KrishnananchorScrolling不会自动工作，例如，如果我直接在新浏览器中打开http://my-ng-app.com/route#section-1，则不会将我带到“section-1”。可能应该有一种设置或手动方式来解决这个问题？ - Krishnan