javascript - 使用 stopImmediatePropagation 方法禁用 routerLink

Question

任务 - 为 Angular 库创建一个可重用的按钮/ anchor 标记属性选择组件，其中尽可能多的行为逻辑绑定(bind)在组件本身而不是 HTML 标记上。

理想情况下，HTML 标记应尽可能干净
<a routerLink="" attributeSelectorForComponent></a>
问题 - 试图阻止 routerLink 在 [attr.disabled] 时触发存在于 anchor 标签上，带有点击监听器。

  @HostListener('click', ['$event']) onMouseClick(event: Event) {
    event.stopImmediatePropagation();
    event.preventDefault()
  }

为简单起见，从等式中删除了禁用的逻辑，无论如何仍会触发 routerLink。

建议的解决方案 - How can I conditionally disable the routerLink attribute?并不能真正帮助解决我的问题，禁用指针事件只会禁用鼠标事件而不是键盘事件，并且还会阻止我删除指针事件:鼠标悬停时没有，单击等需要相对复杂的检测禁用属性并相应地删除 css 的解决方案，通常看起来更像是一个 hacky 解决方案而不是正确的解决方案。

Answer 1

没有解决方案会导致此标记 <a routerLink="" attributeSelectorForComponent></a> .

您尝试的解决方案不起作用，因为 stopImmediatePropagation旨在防止事件冒泡，preventDefault旨在防止此类事件的默认浏览器行为(例如:提交事件将触发 POST 请求)。在任何一种情况下，Angular 都会收到该事件的通知并做出相应的 react 。

如果 RouterLink指令有一个 exportAs属性。在这种情况下，可以控制 RouterLink来自自定义指令。不幸的是，情况并非如此(RouterLink source)

剩下的唯一选择是扩展 RouterLinkWithHref像这样的指令:

@Directive({
  selector: "a[myRouterLink],area[myRouterLink]"
})
export class MyDirective extends RouterLinkWithHref implements OnChanges {
  @Input()
  myRouterLink;

  @Input()
  myDisabled;

  constructor(
    private myRouter: Router,
    private myRoute: ActivatedRoute,
    private myLocationStrategy: LocationStrategy,
    private host: ElementRef
  ) {
    super(myRouter, myRoute, myLocationStrategy);
  }

  ngOnChanges() {
    if (this.myDisabled) {
      this.host.nativeElement.setAttribute("disabled", "disabled");
      this.routerLink = null;
    } else {
      this.host.nativeElement.removeAttribute("disabled");
      this.routerLink = this.myRouterLink;
    }
  }
}

这给出了以下标记: <a myRouterLink="a" [myDisabled]="disabled"></a>
请注意，对于完整的工作解决方案，您还必须扩展 RouterLink
您可以在这里试用演示: https://stackblitz.com/edit/angular-p2w4ff