Angular2，什么是禁用锚元素的正确方法？ [英] Angular2, what is the correct way to disable an anchor element?

问题描述

我正在开发一个 Angular2 应用程序，并且我需要显示 - 但是禁用一个< a> HTML 元素。什么是正确的做法？

I'm working on an Angular2 application, and I need to display -- but disable an <a> HTML element. What is the correct way to do this?

更新

请注意 * ngFor ，这将阻止使用 * ngIf 的选项，并且不会呈现<



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

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

TypeScript 组件的方法如下所示：

The TypeScript component has a method that looks like this:

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

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

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

我看着并考虑使用 pointer-events：none 但这样可以防止我的样式 cursor：not-allowed 不起作用 - 这是要求的一部分。

I looked at and considered using the pointer-events: none but this prevents my style of cursor: not-allowed from working -- and this is part of the requirement.

推荐答案

在CSS中指定 pointer-events：none 禁用鼠标输入，但不禁用键盘输入。例如，用户仍然可以选中该链接并通过按 Enter 键或（在Windows中）≣菜单键进行点击。您可以通过拦截 keydown 事件禁用特定的击键操作，但这可能会让依赖辅助技术的用户感到困惑。

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.

可能禁用链接的最好方法是删除它的 href 属性，使其成为非链接。您可以通过条件 href 属性绑定动态地执行此操作： b
$ b

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>

或者，在GünterZöchbauer的回答中，您可以创建两个链接，一个正常和一个禁用，使用 * ngIf 来显示其中一个：

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>

以下是一些使链接禁用的CSS：

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

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

这篇关于Angular2，什么是禁用锚元素的正确方法？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！