您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

Angular2,禁用锚元素的正确方法是什么?

Angular2,禁用锚元素的正确方法是什么?

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;
}
其他 2022/1/1 18:15:03 有358人围观

撰写回答


你尚未登录,登录后可以

和开发者交流问题的细节

关注并接收问题和回答的更新提醒

参与内容的编辑和改进,让解决方法与时俱进

请先登录

推荐问题


联系我
置顶