Я использую 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>
прокрутят до элемента с идентификатором И сфокусируют их. К сожалению, работает только прокрутка.
Я пытался использовать элементы только с 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>
Мне кажется, что это неправильный способ, поэтому я ищу более элегантное решение.