Typescript Angular2，禁用锚元素的正确方法是什么

发布于05月03日

我正在开发一个Angular2应用程序，我需要显示一个<a> HTML元素.正确的方法是什么？

Updated

请注意*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]属性，但这是错误的，因为锚元素没有disabled属性.

我看过并考虑过使用pointer-events: none，但这阻止了我cursor: not-allowed的风格发挥作用——这是要求的一部分.

推荐答案

在CSS中指定pointer-events: none将禁用鼠标输入，但不会禁用键盘输入.例如，用户仍然可以通过按下回车键或(在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ünter Zö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;
}

Typescript相关问答推荐

使用带有RxJS主题的服务在Angular中的组件之间传递数据

如果请求是流，如何等待所有响应块(Axios)

为什么TypeScript假设文档对象始终可用？

TypeScrip界面属性依赖于以前的属性-针对多种可能情况的简明解决方案

Angular NgModel不更新Typescript

如何使默认导出与CommonJS兼容

如何将v-for中的迭代器编写为v-if中的字符串？

如何将别名添加到vitest配置文件？

如何以Angular 导入其他组件S配置文件

为什么我的导航在使用Typescript的React Native中不起作用？

如何过滤文字中的类对象联合类型？

如何正确调用创建的类型？

自定义 Select 组件的类型问题：使用带逗号的泛型类型<；T与不带逗号的<；T&>；时出错

如何编辑切片器以使用CRUD调用函数？

如何使用TypeScrip在EXPO路由链路组件中使用动态路由？

Typescript .根据枚举输入参数返回不同的对象类型

通过函数传递确切的类型，但验证额外的字段

递归JSON类型脚本不接受 node 值中的变量

元素隐式具有any类型，因为string类型的表达式不能用于索引类型{Categories： Element;管理员：元素； }'

将 Angular 从 14 升级到 16 后出现环境变量注入问题

实用课程推荐