Angular2，禁用锚元素的正确方法是什么？答案

【问题标题】：Angular2, what is the correct way to disable an anchor element?Angular2，禁用锚元素的正确方法是什么？
【发布时间】：2016-08-27 09:01:19
【问题描述】：

我正在开发一个 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 风格工作 - 这是要求的一部分。

【问题讨论】：

标签： html dom typescript angular angular2-template

【解决方案1】：

对于[routerLink]，您可以使用：

添加此 CSS 应该可以满足您的要求：

a.disabled {
   pointer-events: none;
   cursor: not-allowed; 
}

这应该可以解决 @MichelLiu 在 cmets 中提到的问题：

<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>

Plunker example

【讨论】：

所以我不想绑定到[disabled]，为什么不呢？
用户仍然可以选择链接并按 Enter。
@MichaelLiu 有趣所以它还需要(focus)="isDisabled(link) ? false : true"
@GünterZöchbauer 我在 SO 上搜索过的每个 Angular 问题，您都已经回答了！干得好！
@JMK 谢谢：D 这很有趣。可惜时间不多了。

【解决方案2】：

在 CSS 中指定 pointer-events: none 会禁用鼠标输入，但不会禁用键盘输入。例如，用户仍然可以通过按 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ü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;
}

【讨论】：

即使<a> 元素缺少href 它仍然是可点击的，我刚刚验证了这一点......现在呢？仍然不完美。
@DavidPine：我已经更新了处理click 事件的答案。
在这个过程中你将失去 SEO 的最大缺点，看看：webmasters.stackexchange.com/questions/74032/…
你也可以在标签中使用[attr.disabled]="isDisabled(link)"。
@Sriram：不要在<a> 标签上使用[attr.disabled]。它不符合标准，仅适用于 Internet Explorer，不适用于 Chrome 或 Firefox。

【解决方案3】：

刚刚遇到这个问题，想提出一种替代方法。

在 OP 提供的标记中，有一个点击事件绑定。这让我觉得这些元素被用作“按钮”。如果是这种情况，它们可以被标记为<button> 元素并设置类似链接的样式，如果这是您想要的外观。（例如，Bootstrap 有一个内置的“链接”按钮样式，https://v4-alpha.getbootstrap.com/components/buttons/#examples）

这有几个直接和间接的好处。它允许您绑定到disabled 属性，该属性设置后将自动禁用鼠标和键盘事件。它允许您根据 disabled 属性设置禁用状态的样式，因此您不必同时操作元素的类。它的可访问性也更好。

有关何时使用按钮和何时使用链接的精彩文章，请参阅Links are not buttons. Neither are DIVs and SPANs

【讨论】：

【解决方案4】：

你可以试试这个

<a [attr.disabled]="someCondition ? true: null"></a>

【讨论】：

作为解释为什么人们可能会否决这个看似不错的答案，它没有将disabled 添加到锚元素（我希望它这样做！），而是添加了disabled="true"。跨度>

【解决方案5】：

   .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>

【讨论】：

【解决方案6】：

我的回答可能会迟到。它只能通过锚标签内的内联css来实现。

<a [routerLink]="['/user']" [style.pointer-events]="isDisabled ?'none':'auto'">click-label</a>

考虑到isDisabled 是组件中的一个属性，可以是true 或false。

Plunker： https://embed.plnkr.co/TOh8LM/

【讨论】：

我不相信这是正确的。 Angular 仍然传播（点击）绑定，因此它仍然会发生。请用这个创建一个 plunker 并在这里分享。
@DavidPine 我为它添加了一个 plunker。 embed.plnkr.co/TOh8LM 我只是提供了 href 标记的参考，同样它可以与锚标记中的 routerLink 指令一起使用

【解决方案7】：

我用过

tabindex="{{isEditedParaOrder?-1:0}}" 
[style.pointer-events]="isEditedParaOrder ?'none':'auto'"

在我的锚标记中，这样他们就不能通过使用选项卡使用“输入”键以及指针本身移动到锚标记，我们根据属性“isEditedParaO”设置为“无” 嗖嗖嗖

【讨论】：

【解决方案8】：

随便用

<a [ngClass]="{'disabled': your_condition}"> This a tag is disabled</a>

例子：

 <a [ngClass]="{'disabled': name=='junaid'}"> This a tag is disabled</a>

【讨论】：

这不起作用，虽然它会使它看起来被禁用 - 它实际上仍然是可点击的，因此根本无法解决问题。
这里是正确答案...stackoverflow.com/a/36987506/2410379

【解决方案9】：

考虑以下解决方案

.disable-anchor-tag { 
  pointer-events: none; 
}

【讨论】：

【解决方案10】：

这适用于充当标签的锚标记：

[ngStyle]="{'pointer-events': isSaving ? 'none': 'auto'}"

【讨论】：

【解决方案11】：

除了class.disabled，我们还可以绑定一个带有disabled属性的变量。这将仅用于按钮、输入和下拉菜单。 HTML disabled Attribute

例如：

<button [disabled]="isDisabled">Test</button>

Demo

【讨论】：