使用stopImmediatePropogation方法禁用routerLink

Question

任务-为Angular库创建一个可重用的button / anchor标记属性选择的组件，该行为本身的大部分逻辑都绑定在该组件本身上，而不是在HTML标记上。

HTML标记在理想情况下应尽可能整洁

<a routerLink="" attributeSelectorForComponent></a>

问题-尝试[attr.disabled]通过单击侦听器防止锚标记上出现routerLink时触发。

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

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

建议的解决方案- 如何有条件地禁用routerLink属性？并不能真正解决我的问题，禁用指针事件只会禁用鼠标事件而不是键盘事件，并且还会阻止我删除指针事件：没有鼠标悬停，单击ect要求相对复杂的操作解决方案，以检测disable属性并相应地删除css，并且通常似乎比正确的解决方案更讲究技巧。

Answer 1

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

您尝试的解决方案将不起作用，因为stopImmediatePropagation旨在防止事件冒泡，并且preventDefault旨在防止此类事件的默认浏览器行为（例如：提交事件将触发请求POST）。无论哪种情况，Angular 都会收到该事件的通知，并做出相应的反应。

RouterLink如果该指令具有属性，则可能有一个干净的解决方案exportAs。在这种情况下，可以RouterLink通过自定义指令来控制。不幸的是，事实并非如此（RouterLink 来源）

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