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

Question

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

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

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

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

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

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

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

编辑:设置 pointer-events css 中的 none 会阻止点击链接，但我正在寻找一种解决方案，可以防止键盘事件也触发它。

Answer 1

另一种禁用 routerLink 的方法 - 替换 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>