pointer-events: none
在CSS中指定会禁用鼠标输入,但不会禁用键盘输入。例如,用户仍然可以选择链接并通过Enter
按键或(在Windows中)? Menu
键“单击”它。您可以通过拦截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
显示一个或另一个链接:
<ng-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>
</ng-template>
这是一些使链接看起来被禁用的CSS:
a.disabled {
color: gray;
cursor: not-allowed;
text-decoration: underline;
}