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

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

提问by David Pine

I'm working on an Angular2application, and I need to display -- but disablean <a>HTMLelement. What is the correct way to do this?

我正在处理一个Angular2应用程序，我需要显示——但是disable一个<a>HTML元素。这样做的正确方法是什么？

Updated

更新

Please note the *ngFor, this would prevent the option of using *ngIfand not rendering the <a>altogether.

请注意*ngFor，这将阻止使用*ngIf而不是<a>完全呈现的选项。

<a *ngFor="let link of links"
   href="#" 
   [class.disabled]="isDisabled(link)" 
   (click)="onClick(link)">
   {{ link.name }}
</a>

The TypeScriptcomponent has a method that looks like this:

该打字稿组件有一个方法，看起来像这样：

onClick(link: LinkObj) {
    // Do something relevant with the object... 
    return false;
}

I need to actually prevent the element from being clickable, not just appear that it is with the CSS. I was assuming that I needed to potentially bind to the [disabled]attribute at first, but this is incorrect as the anchor element doesn't have a disabledproperty.

我需要实际防止元素可点击，而不仅仅是显示它与CSS 一起使用。我假设我首先需要潜在地绑定到[disabled]属性，但这是不正确的，因为锚元素没有disabled属性。

I looked at and considered using the pointer-events: nonebut this prevents my style of cursor: not-allowedfrom working -- and this is part of the requirement.

我查看并考虑使用pointer-events: none但这阻止了我的cursor: not-allowed工作风格——这是要求的一部分。

回答by Michael Liu

Specifying pointer-events: nonein CSS disables mouse input but doesn't disable keyboard input. For example, the user can still tab to the link and "click" it by pressing the Enterkey or (in Windows) the ? Menukey. You could disable specific keystrokes by intercepting the keydownevent, but this would likely confuse users relying on assistive technologies.

pointer-events: none在 CSS 中指定会禁用鼠标输入，但不会禁用键盘输入。例如，用户仍然可以通过按Enter键或（在 Windows 中）? Menu键来选择链接并“单击”它。您可以通过拦截keydown事件来禁用特定的击键，但这可能会使依赖辅助技术的用户感到困惑。

Probably the best way to disable a link is to remove its hrefattribute, making it a non-link. You can do this dynamically with a conditional hrefattribute binding:

可能禁用链接的最佳方法是删除其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>

Or, as in Günter Z?chbauer's answer, you can create two links, one normal and one disabled, and use *ngIfto show one or the other:

或者，在 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>

Here's some CSS to make the link look disabled:

这是一些使链接看起来被禁用的 CSS：

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

回答by Günter Z?chbauer

For [routerLink]you can use:

因为[routerLink]您可以使用：

Adding this CSS should do what you want:

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

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

This should fix the issue mentioned by @MichelLiu in the comments:

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

<a href="#" [class.disabled]="isDisabled(link)"
    (keydown.enter)="!isDisabled(link)">{{ link.name }}</a>

Another approach

另一种方法

<a [routerLink]="['Other']" *ngIf="!isDisabled(link)">{{ link.name }}</a>
<a  *ngIf="isDisabled(link)">{{ link.name }}</a>  

Plunker example

Plunker 示例

回答by Van J. Wilson

Just came across this question, and wanted to suggest an alternate approach.

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

In the markup the OP provided, there is a click event binding. This makes me think that the elements are being used as "buttons". If that is the case, they could be marked up as <button>elements and styled like links, if that is the look you desire. (For example, Bootstrap has a built-in "link" button style, https://v4-alpha.getbootstrap.com/components/buttons/#examples)

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

This has several direct and indirect benefits. It allows you to bind to the disabledproperty, which when set will disable mouse and keyboard events automatically. It lets you style the disabled state based on the disabled attribute, so you don't have to also manipulate the element's class. It is also better for accessibility.

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

For a good write-up about when to use buttons and when to use links, see Links are not buttons. Neither are DIVs and SPANs

有关何时使用按钮以及何时使用链接的好文章，请参阅链接不是按钮。DIV 和 SPAN 都不是

回答by Darin Cardin

   .disabled{ pointer-events: none }

will disable the click event, but not the tab event. To disable the tab event, you can set the tabindex to -1 if the disable flag is true.

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

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

回答by vineetk27

My answer might be late for this post. It can be achieved through inline css within anchor tag only.

对于这篇文章，我的回答可能会迟到。它只能通过锚标记内的内联 css 来实现。

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

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

Considering isDisabledis a property in component which can be trueor false.

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

Plunker for it: https://embed.plnkr.co/TOh8LM/

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

回答by Sahil Ralkar

consider the following solution

考虑以下解决方案

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

回答by guest

I have used

我用过了

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

in my anchor tag so that they can not move to anchor tag by using tab to use "enter" key and also pointer itself we are setting to 'none' based on property 'isEditedParaO rder' whi

在我的锚标签中，以便他们无法通过使用 tab 使用“输入”键以及指针本身移动到锚标签，我们根据属性“isEditedParaO rder”设置为“无”

回答by Pullat Junaid

Just use

只需使用

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

Example:

例子：

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

回答by Vincent Shen

You can try this

你可以试试这个

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