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

问题描述

我正在开发一个 Angular2 应用程序，我需要显示 -- 但 disable 一个 HTML 元素.这样做的正确方法是什么?

更新

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

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

TypeScript 组件有一个如下所示的方法:

onClick(link: LinkObj) {//做一些与对象相关的事情...返回假；}

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

我查看并考虑使用 pointer-events: none 但这阻止了我的 cursor: not-allowed 风格 - 这是要求.

解决方案

在 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)">{{ 链接名称 }}</a>

或者，在 Günter Zöchbauer 的回答中，您可以创建两个链接，一个正常，一个禁用，并使用 *ngIf 显示一个或另一个:

<a *ngIf="!isDisabled(link)" href="#" (click)="onClick(link)">{{link.name }}</a><a *ngIf="isDisabled(link)" class="disabled">{{link.name }}</a></ng-模板>

这里有一些 CSS 可以让链接看起来被禁用:

a.disabled {颜色:灰色；游标:不允许；文字装饰:下划线；}

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?

Updated

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>

The TypeScript component 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 disabled property.

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.

解决方案

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

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