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

我正在开发一个 Angular2应用程序，我需要显示——但是 disable是一个 <a> 超文本标示语言元素。做这件事的正确方法是什么？

更新

请注意 *ngFor，这将防止选择使用 *ngIf和不渲染的 <a>完全。

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

打字机组件的方法如下所示:

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

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

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

173259 次浏览
小开

For [routerLink] you can use:

Adding this CSS should do what you want:

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

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

<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

小开
最佳答案

Specifying pointer-events: none in 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 Enter key or (in Windows) the ≣ Menu key. You could disable specific keystrokes by intercepting the keydown event, but this would likely confuse users relying on assistive technologies.

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

<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 *ngIf to show one or the other:

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

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

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)

This has several direct and indirect benefits. It allows you to bind to the disabled property, 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.

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

小开

You can try this

<a [attr.disabled]="someCondition ? true: null"></a>
小开 
   .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.

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

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

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

Considering isDisabled is a property in component which can be true or false.

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

小开

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

小开

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

consider the following solution

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

This is for anchor tags that act as tabs:

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

instead of class.disabled, we can also bind a variable with the disabled attribute. This will be used only buttons, inputs and dropdowns. HTML disabled Attribute

For Example:

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

Demo


提交答案