有条件地禁用Angular中的路由器链接

Question

我在Angular项目中有很多链接（使用Angular 2），类似于：

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

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

---

对于样式，我添加了链接：

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

---

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

是否有任何受支持的路由方式来执行此操作，或者是否有其他可行的实现方式？

---

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

Answer 1

禁用routerLink- replace onClick方法的另一种方法。

为此，您必须创建指令：

import { Directive, Input, Optional } from '@angular/core';
import { RouterLink, RouterLinkWithHref } from '@angular/router';

@Directive({
    selector: '[routerLink][disableLink]'
})
export class DisableLinkDirective {

    @Input() disableLink: boolean;

    constructor(
        // Inject routerLink
        @Optional() routerLink: RouterLink,
        @Optional() routerLinkWithHref: RouterLinkWithHref
    ) {

        const link =  routerLink || routerLinkWithHref;

        // Save original method
        const onClick = link.onClick;

        // Replace method
        link.onClick = (...args) => {
            if (this.disableLink) {
                return routerLinkWithHref? false: true;
            } else {
                return onClick.apply(link, args);
            }
        };
    }

}

用法：

<a routerLink="/search" [disableLink]="!isLogged">Search</a>

Answer 2

像这样尝试一下：

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