Html Angular2，禁用锚元素的正确方法是什么？
我正在处理一个Angular2应用程序，我需要显示--Html Angular2，禁用锚元素的正确方法是什么？,html,dom,typescript,angular,angular2-template,Html,Dom,Typescript,Angular,Angular2 Template,我正在处理一个Angular2应用程序，我需要显示--禁用一个HTML元素。正确的方法是什么 已更新 请注意*ngFor，这将阻止使用*ngIf而不完全呈现的选项 <a *ngFor="let link of links" href="#" [class.disabled]="isDisabled(link)" (click)="onClick(link)"> {{ link.name }} </a> 实际上，我需要防止元素被点击，而不仅仅是
禁用一个
HTML元素。正确的方法是什么
已更新
请注意*ngFor
，这将阻止使用*ngIf
而不完全呈现
的选项
<a *ngFor="let link of links"
href="#"
[class.disabled]="isDisabled(link)"
(click)="onClick(link)">
{{ link.name }}
</a>
实际上，我需要防止元素被点击，而不仅仅是用CSS显示。我假设首先可能需要绑定到[disabled]
属性，但这是不正确的，因为锚元素没有disabled
属性
我查看并考虑使用指针事件：none
，但这会阻止我的光标：not allowed
样式工作——这是要求的一部分。对于[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>
在CSS中指定指针事件：无
将禁用鼠标输入，但不会禁用键盘输入。例如，用户仍然可以通过按Enter键或（在Windows中）单击该链接并“单击”该链接≣ 菜单键。您可以通过拦截keydown
事件来禁用特定的击键，但这可能会让依赖辅助技术的用户感到困惑
禁用链接的最佳方法可能是删除其href
属性，使其成为非链接。您可以通过条件href
属性绑定动态执行此操作：
或者，如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>
刚刚遇到这个问题，想提出一个替代方法
在OP提供的标记中，有一个click事件绑定。这让我觉得元素被用作“按钮”。如果是这种情况，可以将它们标记为
元素，并将其样式设置为链接，如果这是您想要的外观的话。（例如，引导具有内置的“链接”按钮样式）
这有几个直接和间接的好处。它允许您绑定到disabled
属性，设置该属性时将自动禁用鼠标和键盘事件。它允许您根据disabled属性设置禁用状态的样式，因此您不必同时操作元素的类。它也更便于访问
有关何时使用按钮和何时使用链接的详细说明，请参见
<a [attr.disabled]="someCondition ? true: null"></a>
将禁用单击事件，但不禁用选项卡事件。要禁用tab事件，如果禁用标志为true，则可以将tabindex设置为-1
<li [routerLinkActive]="['active']" [class.disabled]="isDisabled">
<a [routerLink]="['link']" tabindex="{{isDisabled?-1:0}}" > Menu Item</a>
</li>
菜单项
我的回答可能会迟到。它只能通过锚标记内的内联css实现
我用过
tabindex="{{isEditedParaOrder?-1:0}}"
[style.pointer-events]="isEditedParaOrder ?'none':'auto'"
在我的锚定标记中，通过使用tab键使用“enter”键和指针本身，使它们不能移动到锚定标记，我们根据属性“isEditedParaO”将其设置为“无”
只需使用
<a [ngClass]="{'disabled': your_condition}"> This a tag is disabled</a>
此标记已禁用
例如：
<a [ngClass]="{'disabled': name=='junaid'}"> This a tag is disabled</a>
此标记已禁用
考虑以下解决方案
.disable-anchor-tag {
pointer-events: none;
}
这适用于充当选项卡的定位标记：
[ngStyle]="{'pointer-events': isSaving ? 'none': 'auto'}"
所以我不想绑定到[禁用]
，为什么不呢？用户仍然可以点击链接并按Enter。@MichaelLiu有趣，所以它还需要（焦点）=“isDisabled（link）？false:true”
@GünterZöchbauer我搜索的每个角度问题，所以，你已经回答了！干得好@谢谢你，我觉得很有趣。遗憾的是，时间不多了。即使
元素缺少href
它仍然可以单击，我刚刚验证了这一点……现在怎么办？仍然不完美。@DavidPine:我已经更新了我的答案来处理点击事件。在这个过程中，最大的缺点是你会失去搜索引擎优化，看看：你也可以在标记中使用[attr.disabled]=“isDisabled（link）”
。@Sriram:不要在
标记上使用[attr.disabled]
。它不符合标准，只能在Internet Explorer中使用，不能在Chrome或Firefox中使用。我认为这是不对的。Angular仍然传播（单击）绑定，因此它仍然会发生。请用这个创建一个plunker并在这里共享。@DavidPine我为它添加了一个plunker。我刚才引用了href标记，类似地，它可以在锚标记中使用routerLink
指令。这不起作用，但它会使它看起来被禁用-实际上它仍然可以单击，因此根本无法解决问题。下面是正确的答案。。。为了解释为什么folk可能投票否决了这个看似不错的答案，它没有在锚元素中添加disabled
（我希望它添加！），而是添加了disabled=“true”
。
.disable-anchor-tag {
pointer-events: none;
}
[ngStyle]="{'pointer-events': isSaving ? 'none': 'auto'}"