html – Angular2,禁用锚点元素的正确方法是什么？

我正在使用Angular2应用程序,我需要显示 – 但禁用< a> HTML元素.这样做的正确方法是什么？

更新

请注意* ngFor,这将阻止使用* ngIf的选项,而不是呈现< a>共.

<a *ngFor="let link of links"
   href="#" 
   [class.disabled]="isdisabled(link)" 
   (click)="onClick(link)">
   {{ link.name }}
</a>

TypeScript组件有一个如下所示的方法：

onClick(link: LinkObj) {
    // Do something relevant with the object... 
    return false;
}

我需要实际阻止该元素的可点击,而不仅仅是CSS.我假设我需要首先绑定到[disabled]属性,但是这不正确,因为anchor元素没有disabled属性.

我查看并考虑使用指针事件：无,但这阻止了我的游标风格：不允许工作 – 这是要求的一部分.

解决方法

指定指针事件：CSS中的none禁用鼠标输入,但不会禁用键盘输入.例如,用户仍然可以选择链接,然后按Enter键或(在Windows中)≣菜单键“点击”.您可以通过拦截keydown事件来禁用特定的击键,但这可能会混淆用户依靠辅助技术.

禁止链接的最佳方法可能是删除其href属性,使其成为非链接.您可以使用条件href属性绑定动态地执行此操作：

<a *ngFor="let link of links"
   [attr.href]="isdisabled(link) ? null : '#'"
   [class.disabled]="isdisabled(link)"
   (click)="!isdisabled(link) && onClick(link)">
   {{ link.name }}
</a>

或者,如在GünterZöchbauer的答案中,您可以创建两个链接,一个正常和一个残疾人,并使用* ngIf来显示一个或另一个：

<template ngFor #link [ngForOf]="links">
    <a *ngIf="!isdisabled(link)" href="#" (click)="onClick(link)">{{ link.name }}</a>
    <a *ngIf="isdisabled(link)" class="disabled">{{ link.name }}</a>
</template>

这是一些CSS使链接看起来禁用：

a.disabled {
    color: gray;
    cursor: not-allowed;
    text-decoration: underline;
}

原文地址：https://www.jb51.cc/html/230701.html