有条件地禁用Angular中的路由器链接 [英] Conditionally disable router link in Angular

问题描述

我在Angular项目中有许多链接(使用Angular 2)，类似于:

I have a number of link in an Angular project (using Angular 2), similar to:

<a [routerLink]="..."
     [routerLinkActive]="..."
     [routerLinkActiveOptions]="...">
    Link
</a>

我想根据上下文/状态禁用其中一些(通过更改颜色并防止操作发生).

I would like to disable some of these depending on the context/state (by changing the color and preventing the action from happening).

对于样式，我已添加到链接:

For styling, I have added to the link:

[class.disabled]="!isValidLink()"

---

这使我可以将链接显示为已禁用，但仍然需要阻止路由.如果我向元素添加 target ="_ self" ，它会阻止路由，但是我需要根据某些状态有条件地执行此操作.

---

This lets me show the links as disabled, but I still need to prevent the routing. If I add a target="_self" to the element, it prevents routing, but I need to do this conditionally, depending on some state.

是否有任何支持的路由方式或其他可行的实现方式?

Is there any supported routing way of doing this, or some other implementation that would work?

编辑:在CSS中将 pointer-events 设置为none可以防止单击链接，但是我正在寻找一种解决方案来防止键盘事件也触发该链接.

Setting pointer-events to none in css would prevent clicking on the link, but am looking for a solution which would prevent keyboard events from triggering it too.

推荐答案

尝试一下:

<a [routerLink]="..."
    [class.disabled]="!isValidLink()" 
    (keydown.enter)="isValidLink()">Link</a>    

这篇关于有条件地禁用Angular中的路由器链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！