Javascript 角度跳到主要内容链接SPA问题

我一直在尝试和寻找很多，但被卡住了，所以非常感谢任何帮助这里

我的任务：在Angular 8应用程序上实现可访问性功能-跳到主内容链接，为用户提供在可聚焦元素上进行制表的可能性，第一个必须是跳到主内容链接。如果他们点击它，他们将跳过所有菜单导航，直接进入主要内容

因此，我已经实现了到header组件的链接，并使其成为每个组件的第一个可聚焦元素：

<header-component>
      <div ><span tabindex="-1"></span>
        <a [href]="skipPath" class="skip">skip to main content</a>
      </div>
<nav>navs</nav>
</header-component>

<about-component>
<div id= "main-content">Main</div>
</about-component>

结果: http://localhost:4200/about#main-内容

我已经让它工作了，它会监听我现在所在的页面，生成正确的URL，但随后它就不去了。实际上，它跳到了它应该在的地方，但立即返回到原来的位置（页面顶部）

---

有什么想法吗？

您似乎正在将焦点设置在第一个跨度元素上。我理解正确吗？是的，因为我希望它在默认情况下成为页面上的第一个焦点元素。当用户第一次点击tab按钮时，焦点移动并“激活”我的跳转到主内容链接（该链接是隐藏的，仅当点击tab按钮时才会显示）。问题是，这个链接并没有将我指向#main content.。似乎您正在将焦点设置在第一个span元素上。我理解正确吗？是的，因为我希望它在默认情况下成为页面上的第一个焦点元素。当用户第一次点击tab按钮时，焦点移动并“激活”我的跳转到主内容链接（该链接是隐藏的，仅当点击tab按钮时才会显示）。问题是这个链接并没有将我引导到#主要内容。。

ngOnInit() {
    this.router.events.pipe(
      filter(event => event instanceof NavigationEnd)
    ).subscribe((event: any) => {
              this.skipPath = `${event.url}#main-content`;          
              document.getElementsByTagName('span')[0].focus();
           });
}