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

Question

我正在开发 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 风格无法发挥作用——这是要求的一部分。

Answer 1

对于 [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>

Plunker example

Answer 2

在 CSS 中指定 pointer-events: none 会禁用鼠标输入，但不会禁用键盘输入。例如，用户仍然可以通过按 Enter 键或（在 Windows 中）[=26] 跳转到 link 和 "click" =]≣ 菜单键。您可以通过拦截 keydown 事件来禁用特定的击键，但这可能会使依赖辅助技术的用户感到困惑。

可能禁用 link 的最佳方法是删除其 href 属性，使其成为非 link。您可以使用条件 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 的回答，您可以创建两个 link，一个正常，一个禁用，然后使用 *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 可以让 link 看起来像残疾人：

a.disabled {
    color: gray;
    cursor: not-allowed;
    text-decoration: underline;
}

Answer 3

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

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

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

有关何时使用按钮和何时使用链接的详细说明，请参阅 Links are not buttons. Neither are DIVs and SPANs

Answer 4

你可以试试这个

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

Answer 5

   .disabled{ pointer-events: none }

将禁用点击事件，但不会禁用标签事件。要禁用选项卡事件，如果禁用标志为真，则可以将 tabindex 设置为 -1。

<li [routerLinkActive]="['active']" [class.disabled]="isDisabled">
     <a [routerLink]="['link']" tabindex="{{isDisabled?-1:0}}" > Menu Item</a>
</li>

Answer 6

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

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

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

它的傻瓜： https://embed.plnkr.co/TOh8LM/

Answer 7

我用过

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

在我的锚标签中，这样他们就不能通过使用 Tab 来使用 "enter" 键和指针本身来移动到锚标签，我们根据属性设置为 'none' ' isEditedParaO 命令'whi

Answer 8

只需使用

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

示例：

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

Answer 9

考虑以下解决方案

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

Answer 10

这是作为标签的锚标签：

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

Answer 11

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

例如：

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

Demo

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

Angular2, what is the correct way to disable an anchor element?

html

dom

typescript

angular2-template

angular