Angular：如何利用RouterLinkActive检测当前页面链接点击并触发回顶

方法一：直接利用RouterLinkActive的激活状态判断（推荐） #

给目标a标签添加模板引用变量，绑定routerLinkActive的实例，然后在点击事件里判断激活状态，满足条件时触发滚动回顶：

修改后的标签代码：

<a 
  *ngIf="!sublinkItem.outerLink" 
  [title]="sublinkItem.altText" 
  [routerLink]="[sublinkItem.link]" 
  routerLinkActive="active" 
  [routerLinkActiveOptions]="{exact: true}" 
  class="dropdown-item outer-link" 
  [innerHTML]="sublinkItem.text"
  #rla="routerLinkActive"
  (click)="rla.isActive && scrollToTop()"
></a>

逻辑很直接：点击链接时，先通过rla.isActive判断当前链接是否处于激活状态，若是则调用scrollToTop()。因为点击已激活的路由链接时，Angular不会触发路由跳转，只会执行我们的滚动方法，完全符合页脚场景的需求。

方法二：结合路由事件监听（复杂场景可选） #

如果需要在路由确认完成后再执行滚动（比如路由跳转后触发），可以通过Router服务监听路由事件，但注意：点击当前已激活的链接不会触发路由跳转事件，所以这种方式仅适用于需要路由变化后滚动的场景，页脚点击当前链接的场景还是方法一更合适。

组件内代码示例：

import { Router, NavigationEnd, ActivatedRoute } from '@angular/router';
import { filter, map, mergeMap } from 'rxjs/operators';

constructor(private router: Router, private route: ActivatedRoute) {}

ngOnInit(): void {
  this.router.events.pipe(
    filter(event => event instanceof NavigationEnd),
    map(() => this.route),
    map(route => {
      while (route.firstChild) route = route.firstChild;
      return route;
    }),
    filter(route => route.outlet === 'primary')
  ).subscribe(() => {
    // 这里可根据当前路由是否匹配目标链接，执行滚动逻辑
    // this.scrollToTop();
  });
}

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