Angular跳转至内容功能仅生效一次的问题排查与解决

问题描述 #

在Angular应用中添加跳转至主体内容的链接后，功能仅能生效一次：按Tab键回到该链接并再次点击时，会被导航至首页；第三次点击才能正常跳转到指定的main-content元素。

尝试过的方案 #

1. 基于routerLink的a标签实现 #

<a class="skipToMain" [routerLink]="[currentURL]" [fragment]="fragment">Skip to content</a>

对应的TypeScript逻辑：

fragment: string = 'main-content';
currentUrl: any = '';

constructor(private router: Router) {
    router.events.subscribe((e) => {
      if (e instanceof NavigationEnd) {
        this.currentUrl = e.url || '';
      }
    });
}

2. 基于点击事件的按钮实现 #

<button class="skipToMain" (click)="skipToMain()">Skip to content</button>

对应的TypeScript逻辑：

fragment: string = 'main-content';

skipToMain(){
    this.router.navigate([this.router.url], 
   {fragment: this.fragment, relativeTo: this.route, skipLocationChange: true, replaceUrl: false});
}

3. 额外尝试：修改地址栏状态 #

在skipToMain()的router.navigate后添加this.location.replaceState('')（传入对应页面URL），但无效果，第二次点击仍会跳转到首页。

4. 部分生效的滚动方案 #

以下代码避免了跳转到其他页面，但Angular Router内部URL未清除，导致无法连续两次触发跳转：

scrollTo(fragment): void {
    console.log(this.router.url);
    this.router.navigate([], { fragment: fragment }).then(res => {
      const element = document.getElementById(fragment);
      if (element != undefined) element.scrollIntoView();
    });
    this.location.go(this.currentURL);
}

尝试使用this.location.replaceState(this.currentURL)和this.location.go(this.currentURL)仅能清空浏览器地址栏，无法清除Angular内部路由记录。

临时解决方案 #

不依赖Angular路由，直接通过TypeScript手动聚焦目标元素：

skipToMain(): void {
    let focusElement = document.querySelectorAll('#main-content')[0] as HTMLElement;
    focusElement.focus();
}

注意：该方案并非Angular的标准实现方式，且不适用于页面存在多个#main-content元素的场景，但当前可满足基础需求。若有更符合Angular最佳实践的方案，欢迎补充。

内容的提问来源于stack exchange，提问作者hego64