<a> 带有 routerLink 和 Fragment 未将焦点设置在元素上答案

【问题标题】：<a> with routerLink and fragment does not set focus on the element<a> 带有 routerLink 和 Fragment 未将焦点设置在元素上
【发布时间】：2020-04-08 18:52:56
【问题描述】：

我正在使用 Angular 9.0.6。我在满足 WCAG 标准的页面导航方面遇到问题。

我的应用组件如下所示：

<nav class="pageNav">
  <ul>
    <li><a [routerLink]="" fragment="main-nav">Navigation</a></li>
    <li><a [routerLink]="" fragment="main-section">Main section</a></li>
    <li><a [routerLink]="" fragment="cookie">Cookies</a></li>
  </ul>
</nav>
<div class="mainWrapper">
  <header class="navHeader">
    <div class="projectLogo"></div>
  </header>
  <nav tabindex="-1" id="main-nav">
    <h2 class="sr-only">Navigation</h2>
    <ul>
      <li><a routerLink="/main" href="">Main page</a></li>
      <li><a routerLink="/about" href=""><About</a></li>
      <li><a routerLink="/contact" href="">Contact</a></li>
    </ul>
  </nav>
  <section id="main-section">
    <router-outlet></router-outlet>
  </section>
</div>
<div id="cookie">
  <app-cookie-dialog></app-cookie-dialog>
</div>

在生根模块中我设置了anchorScrolling：

const routerOptions: ExtraOptions = {
  anchorScrolling: 'enabled'
};

@NgModule({
  imports: [RouterModule.forRoot(routes, routerOptions)],
  exports: [RouterModule]
})
export class AppRoutingModule {
}

我预计到锚点的链接：

    <li><a [routerLink]="" fragment="main-nav">Navigation</a></li>
    <li><a [routerLink]="" fragment="main-section">Main section</a></li>
    <li><a [routerLink]="" fragment="cookie">Cookies information</a></li>

将滚动到具有 id 的元素并聚焦它们。不幸的是，只有滚动有效。

我尝试仅使用带有 href 的元素：

    <li><a href="#main-nav">Navigation</a></li>
    <li><a href="#main-section">Main section</a></li>
    <li><a href="#cookie">Cookies information</a></li>

只要我在主页上，它就可以工作。在其他页面上使用这些链接将我重定向到主页。（它们总是指向 localhost:4200/#....）

我找到了一种解决方法，可以读取当前 url 并将其添加到 href。路由以 .ts 文件形式提供。

 <a [href]="this.route + '#main-nav'">Navigation</a>

感觉这不是正确的做法，所以我正在寻找更优雅的解决方案。

【问题讨论】：

标签： html angular typescript

【解决方案1】：

现在角度似乎不支持聚焦。对焦元素有一个功能需求：https://github.com/angular/angular/issues/30067

 <a [href]="this.route + '#main-nav'">Navigation</a>

似乎是目前实现它的最佳方式。

【讨论】：