Question

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

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

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

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

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

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

是否有任何支持的路由方式，或其他一些可行的实现？

编辑：在css中将pointer-events设置为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>

Answer 2

尝试这样：

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

Answer 3

你能做两个锚标记吗？

<a *ngIf="onCase" [routerLink]="..."
     [routerLinkActive]="..."
     [routerLinkActiveOptions]="...">
    Link
</a>
<a *ngIf="offcase" [class.disabled]="!isValidLink()">
    Link
</a>

Answer 4

见 this。它使用 span 元素来捕获单击事件，并在 span 上使用 stopPropagation 来“preventDefault”。
...它工作正常！

<a routerLink="/test"><span (click)="testClick($event)">Test link</span></a>

function testClick($event: MouseEvent) {
    if (expression) {
        $event.stopPropagation();
        // do something
        return;
    }
    // navigates to /test
}

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

4 个答案: