我正在开发 Angular2 应用程序,我需要显示 - 但disable
<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]
属性,但这是不正确的,因为锚元素没有disabled
属性。
我查看并考虑使用pointer-events: none
,但这会阻止我的cursor: not-allowed
风格工作 - 这是要求的一部分。
答案 0 :(得分:75)
在CSS中指定pointer-events: 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
来显示一个或另一个:
<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;
}
答案 1 :(得分:28)
对于[routerLink]
,您可以使用:
添加此CSS应该可以执行您想要的操作:
a.disabled {
pointer-events: none;
cursor: not-allowed;
}
这应解决@MichelLiu在评论中提到的问题:
<a href="#" [class.disabled]="isDisabled(link)"
(keydown.enter)="!isDisabled(link)">{{ link.name }}</a>
另一种方法
<a [routerLink]="['Other']" *ngIf="!isDisabled(link)">{{ link.name }}</a>
<a *ngIf="isDisabled(link)">{{ link.name }}</a>
答案 2 :(得分:4)
刚刚遇到这个问题,并想提出另一种方法。
在OP提供的标记中,有一个click事件绑定。这让我觉得元素被用作&#34;按钮&#34;。如果是这种情况,可以将它们标记为<button>
元素并设置为类似链接,如果这是您想要的外观。 (例如,Bootstrap有一个内置的&#34;链接&#34;按钮样式,https://v4-alpha.getbootstrap.com/components/buttons/#examples)
这有几个直接和间接的好处。它允许您绑定到disabled
属性,该属性在设置时将自动禁用鼠标和键盘事件。它允许您根据禁用的属性设置禁用状态的样式,因此您不必操纵元素的类。它也更适合可访问性。
有关何时使用按钮以及何时使用链接的详细说明,请参阅Links are not buttons. Neither are DIVs and SPANs
答案 3 :(得分:3)
这篇文章的答案可能太晚了。它只能通过anchor标签中的内联css实现。
<a [routerLink]="['/user']" [style.pointer-events]="isDisabled ?'none':'auto'">click-label</a>
考虑isDisabled
是组件中的属性,可以是true
或false
。
答案 4 :(得分:2)
.disabled{ pointer-events: none }
将禁用click事件,但不会禁用tab事件。要禁用tab事件,如果禁用标志为true,则可以将tabindex设置为-1。
<li [routerLinkActive]="['active']" [class.disabled]="isDisabled">
<a [routerLink]="['link']" tabindex="{{isDisabled?-1:0}}" > Menu Item</a>
</li>
答案 5 :(得分:1)
这是用于充当标签的锚标记:
[ngStyle]="{'pointer-events': isSaving ? 'none': 'auto'}"
答案 6 :(得分:0)
我用过
tabindex="{{isEditedParaOrder?-1:0}}"
[style.pointer-events]="isEditedParaOrder ?'none':'auto'"
在我的锚标记中,这样它们就不能通过使用制表符使用“ enter”键和指针本身来移动到锚标记,我们基于属性“ isEditedParaO”将其设置为“无” 骑手的呼声
答案 7 :(得分:0)
只需使用
<a [ngClass]="{'disabled': your_condition}"> This a tag is disabled</a>
示例:
<a [ngClass]="{'disabled': name=='junaid'}"> This a tag is disabled</a>
答案 8 :(得分:0)
考虑以下解决方案
.disable-anchor-tag {
pointer-events: none;
}
答案 9 :(得分:-3)
你可以试试这个
{{1}}