如何有条件地禁用routerLink属性？

Question

在我的Angular 2应用程序中,我试图禁用routerLink而没有任何成功.我试图处理事件上的click事件click(使用event.preventDefault()和event.stopPropagation()),但它不起作用.

如何禁用routerLink？

Answer 1

禁用pointer-events的

<a [routerlink]="xxx" [class.disabled]="disabled ? true : null">Link</a>

a.disabled {
   pointer-events: none;
   cursor: default;
}

另请参阅Angular2,禁用锚元素的正确方法是什么？

要么

<a *ngIf="isEnabled" [routerlink]="xxx">Link</a>
<div *ngIf="!isEnabled">not a link</div>

或者轻松重用已禁用的链接模板

<ng-template #disabledLink>
  <div *ngIf="!isEnabled">not a link</div>
</ng-template>
<a *ngIf="isEnabled; else disabledLink" [routerlink]="xxx">Link</a>

Answer 2

无需禁用任何指针事件:

模板:

<a [routerLink]="homeLinkEnabled ? '/home' : null" routerLinkActive="is-active">Home</a>

可选CSS:

.is-active {
    cursor: default;
    text-decoration: none;
}

描述:

当homeLinkEnabled回报false,null将使routerLink链接到当前的/活动的路线.

如果routerLink链接到活动路由,routerLinkActive则将应用指定的类.

在那里我们可以指定禁用的routerLink应该如何出现.

routerLink 到活动路线不会触发导航事件.

Answer 3

所有最重要的答案都是解决方法。

最好的方法是您可以在此解决方案中找到的东西/sf/answers/3172624031/ by @taras-d

禁用 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 4

我刚刚在类似的问题上取得了一些成功：在 ngFor 中有一系列导航链接，其中一些需要 [routerLink]，而其他则需要（单击） - 我的问题是所有链接都依赖于 [routerLink] 来实现 [routerLinkActive] ，所以我不得不停止 routerLink，而不触及它的值。

`<a [routerLink]="item.link" routerLinkActive="isActive">
    <span (click)="item.click ? item.click($event) : void>
</a>`

和：

`click: ($event) => {
    $event.stopPropagation(); // Only seems to
    $event.preventDefault(); // work with both
    // Custom onClick logic
}`

由于跨度在内部，您可以确保事件的取消发生在它冒泡到 [routerLink] 之前，而 routerLinkActive 仍然适用。