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

Question

在我的 Angular 2 应用程序中，我尝试禁用 routerLink 但没有成功。我尝试处理

click

事件上的点击事件（使用

event.preventDefault()

和

event.stopPropagation()

），但它不起作用。

如何禁用 routerLink？

Answer 1

通过 CSS 禁用元素上的

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

角度13及以上

[routerLink]="null"

（和

undefined

）现在正式用于禁用

routerLink

。
（参见文档）

所以这就足够了：

<a [routerLink]="linkEnabled ? 'path' : null">Link</a>

角度12及以下

[routerLink]="null"

（和

undefined

）被视为空命令数组的简写。因此，它使

routerLink

链接到当前/活动路线。这种行为使我们能够滥用

routerLinkActive

指令来达到我们的目的：

模板：

<a [routerLink]="linkEnabled ? 'path' : null"
   [routerLinkActive]="linkEnabled ? 'is_active' : 'is_disabled'">Link</a>

可选CSS：

.is_disabled {
    cursor: default;
    text-decoration: none;
}

.is_active {
    // your style for active router link
}

现场演示（Angular 10）：
查看 StackBlitz 上的演示

详细说明：

当

linkEnabled

返回

false

时，

null

将使

routerLink

链接到当前/活动路线。

如果

routerLink

链接到活动路由，则将应用

routerLinkActive

中指定的类别。在这种情况下，这将是

is_disabled

。

我们可以指定禁用的 routerLink 应如何显示。

routerLink

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

Answer 3

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

最好的方法是您可以在此解决方案中找到的东西https://stackoverflow.com/a/45323200/3241192@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 仍然适用。

Answer 5

在

any

html 标签上禁用 pointer-events：

<div [routerLink]="['/home', { foo: bar }]"
     [ngStyle]="{'pointer-events': myLinkEnabled ? 'none' : null}">
     Click me
</div>

'none'

解析为禁用

pointer-events

，即禁用链接。

null

决定忽略这种风格。

Answer 6

不幸的是，Angular 似乎没有对 routerLink 的 null 值支持。

但是，这对我有用。我的菜单实现示例：

<div *ngFor="let category of categories" [routerLink]="category.subcategories ? [] : [category.link]" (click)="toggleSubcategories(category)">

简单来说，如果某个类别有子类别，则不要重定向，而是打开子类别。

Answer 7

试试这个：

<div *ngFor="let childitem of menuitem.MenuRoutes">
<a [routerLink]="menuitem.IsMain ? [childitem.Route] : []"><a>
</>

Answer 8

我的情况是使用routerLink，有时使用点击打开模态，如果我们不提供routerLink URL，则路由URL的内部逻辑。所以为了点击，我不得不删除routerLink。

[routerLink]="disableRouterLink ? null : (btnRouterLink || pathCondition)"

就我而言，

null

删除了routerLink属性，我可以正确使用

(click)

事件。

附注 上面答案中提供的空数组

[]

不会从元素中删除属性routerlink。

Answer 9

我知道这是一篇旧帖子，但谷歌将我发送到这里，所以以防万一其他人也最终来到这里......

链接只能用于导航到真实的 URL。它们没有禁用属性。尝试模拟链接的禁用状态不利于可访问性。 详情请参阅MDN。

• 当无法导航到该路线时，请考虑删除链接。

• 如果您无法删除链接，请考虑使用按钮。按钮有一个可以绑定的禁用属性。现在您也可以直接在按钮上使用 routerLink 指令。