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

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

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

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

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

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

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

是否有任何支持的路由方式可以做到这一点，或者其他一些可行的实现？

Edit:环境pointer-eventscss 中的 none 会阻止点击链接，但我正在寻找一种解决方案来阻止键盘事件触发它。

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

为此，您必须创建指令：

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);
            }
        };
    }

}

Usage:

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