如何有条件地禁用routerLink属性? [英] How can I conditionally disable the routerLink attribute?

问题描述

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

In my Angular 2 application I'm trying to disable a routerLink without any success. I've tried to handle the click event on the click event (with event.preventDefault() and event.stopPropagation()) but it doesn't work.

如何禁用routerLink?

How can I disable a routerLink?

推荐答案

通过CSS在元素上禁用pointer-events:

Disable pointer-events on the element via CSS:

<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>

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

or to easily reuse the disabled link template

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

这篇关于如何有条件地禁用routerLink属性?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！