Angular 7迁移后带target="_blank"的超链接失效问题及全局方案

这问题我之前帮团队迁移Angular版本时遇到过，刚好能给你捋清楚来龙去脉～

为什么添加(click)="$event.stopPropagation()"就能恢复？ #

在Angular 6及更早版本中，RouterLink指令内部会自动阻止点击事件的冒泡（默认调用event.stopPropagation()），同时外部<a>标签的跳转逻辑优先级也更高，不会被父元素的事件干扰。

但Angular 7对RouterLink的事件处理逻辑做了关键调整：移除了默认阻止冒泡的行为，目的是让开发者更灵活地控制父子元素间的事件交互。如果你的链接嵌套在绑定了(click)事件的父元素（比如卡片、列表项）里，点击链接时事件会先触发链接的逻辑，然后冒泡到父元素的点击事件。如果父元素的点击事件包含event.preventDefault()或者其他干扰导航/跳转的逻辑，就会直接导致链接失效。

你手动添加stopPropagation()后，阻止了事件向父元素冒泡，父元素的干扰逻辑无法触发，链接自然就能正常工作了。

全局解决方案：不用逐个链接加代码 #

手动给每个链接加stopPropagation()太繁琐，推荐两种全局处理方式：

1. 自定义指令扩展RouterLink #

创建一个全局指令，自动给所有带routerLink的元素添加阻止冒泡逻辑：

import { Directive, HostListener } from '@angular/core';
import { RouterLink, RouterLinkWithHref } from '@angular/router';

@Directive({
  selector: '[routerLink], [routerLinkWithHref]'
})
export class RouterLinkStopPropagationDirective {
  constructor(private routerLink: RouterLink | RouterLinkWithHref) {}

  @HostListener('click', ['$event'])
  onClick(event: MouseEvent): void {
    event.stopPropagation();
  }
}

在根模块（比如AppModule）中声明这个指令后，所有使用routerLink的元素都会自动应用该逻辑。

2. 全局处理外部<a>标签 #

对于指向外部资源的<a>标签，同样可以用指令批量处理：

import { Directive, HostListener } from '@angular/core';

@Directive({
  selector: 'a[target="_blank"]'
})
export class ExternalLinkStopPropagationDirective {
  @HostListener('click', ['$event'])
  onClick(event: MouseEvent): void {
    event.stopPropagation();
  }
}

同样在根模块声明后，所有带target="_blank"的外部链接都会自动阻止事件冒泡。

备选方案：修改父元素事件逻辑 #

如果父元素的点击事件不需要在点击链接时触发，也可以在父元素的事件处理中判断事件源：

<div (click)="handleParentClick($event)">
  <a href="http://host/Pages/filename.aspx" target="_blank">Label</a>
  <a target="_blank" [routerLink]="['../otherview']" [queryParams]="{id:entity.id}">{{entity.id}}</a>
</div>

组件类中添加判断：

handleParentClick(event: MouseEvent): void {
  const target = event.target as HTMLElement;
  // 如果点击的是链接或链接的子元素，跳过父元素逻辑
  if (target.tagName === 'A' || target.closest('A')) {
    return;
  }
  // 父元素原本的业务逻辑
}

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