javascript - 使用stopImmediatePropagation方法禁用routerLink

任务-为Angular库创建一个可重用的button/anchor标记属性选择的组件，其行为逻辑与组件本身无关，而与HTML标记无关。

HTML标记在理想情况下应尽可能整洁
<a routerLink="" attributeSelectorForComponent></a>
问题-尝试通过单击监听器在 anchor 标记中存在[attr.disabled]时阻止routerLink触发。

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

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

建议的解决方案-How can I conditionally disable the routerLink attribute?并不能真正解决我的问题，禁用指针事件只会禁用鼠标事件而不是键盘事件，并且还会阻止我删除指针事件:没有鼠标指针，单击ect会要求是一个相对复杂的解决方案，用于检测disable属性并相应地删除css，通常来说，它似乎比正确的解决方案更容易破解。

最佳答案

没有解决方案会导致这种标记<a routerLink="" attributeSelectorForComponent></a>。

您尝试的解决方案将不起作用，因为stopImmediatePropagation旨在防止事件冒泡，并且preventDefault旨在防止此类事件的默认浏览器行为(例如:Submit事件将触发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

关于javascript - 使用stopImmediatePropagation方法禁用routerLink，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/58301088/