Question

在我的Angular 2应用程序中，我试图禁用routerLink而没有任何成功。我已尝试处理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, what is the correct way to disable an anchor element?

或

<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

我在一个类似的问题上也取得了一些成功：在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 4

您可以根据条件决定是否呈现routerLink指令。

在模板中：

<a [attr.routerLink]="isDisabled ? null : ''"></a>

当值为null时，routerLink指令将不会呈现在元素上。

在您的组件文件中：

get isDisabled() {
 return ... // logic for when the routerLink should be disabled
}

Answer 5

所有最佳答案都是解决方法。

最好的方法是您可以在@taras-d 的此解决方案 https://stackoverflow.com/a/45323200/3241192 中找到的方法

<块引用>

另一种禁用 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 6

在任何 html标签上禁用pointer-events：

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

'none'决定禁用pointer-events，即禁用链接。

null决定忽略样式。

Answer 7

不幸的是，Angular似乎没有为 routerLink 提供 null 值。

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

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

简单地说，如果一个类别有任何子类别，请不要重定向，而要打开这些子类别。

Answer 8

尝试一下：

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

Answer 9

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

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

就我而言，null 删除了 routerLink 属性，我可以正确使用 (click) 事件。

附言abowe 的答案中提供的空数组 [] 不会从元素中删除属性 routerlink。

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

9 个答案:

无需禁用任何指针事件：