任务 - 为 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 解决方案而不是正确的解决方案。

请您参考如下方法:

没有解决方案会导致此标记 <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