angular html清除元素,html-Angular2，禁用锚元素的正确方法是什么？

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

我正在使用Angular2应用程序，需要显示-但是pointer-events: none和cursor: not-allowed HTML元素。 正确的方法是什么？

更新

请注意pointer-events: none，这将阻止使用cursor: not-allowed而不完全渲染的选项。

href="#"

[class.disabled]="isDisabled(link)"

(click)="onClick(link)">

{{ link.name }}

TypeScript组件具有如下所示的方法：

onClick(link: LinkObj) {

// Do something relevant with the object...

return false;

}

我实际上需要防止该元素被单击，而不仅仅是与CSS一起出现。 我以为我首先需要潜在地绑定到pointer-events: none属性，但这是不正确的，因为锚元素没有cursor: not-allowed属性。

我查看并考虑使用pointer-events: none，但这使我的cursor: not-allowed样式无法正常工作-这是要求的一部分。

9个解决方案

81 votes

在CSS中指定*ngIf会禁用鼠标输入，但不会禁用键盘输入。 例如，用户仍然可以跳至链接并通过按Enter键或(在Windows中))菜单键“单击”它。 您可以通过拦截href事件来禁用特定的击键操作，但这可能会使依赖辅助技术的用户感到困惑。

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

[attr.href]="isDisabled(link) ? null : '#'"

[class.disabled]="isDisabled(link)"

(click)="!isDisabled(link) && onClick(link)">

{{ link.name }}

或者，按照GünterZöchbauer的回答，您可以创建两个链接，一个是普通链接，另一个是禁用链接，并使用*ngIf显示其中一个：

{{ link.name }}

{{ link.name }}

这是一些使链接看起来无效的CSS：

a.disabled {

color: gray;

cursor: not-allowed;

text-decoration: underline;

}

Michael Liu answered 2019-10-26T10:32:06Z

31 votes

对于[routerLink]，您可以使用：

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

a.disabled {

pointer-events: none;

cursor: not-allowed;

}

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

(keydown.enter)="!isDisabled(link)">{{ link.name }}

另一种方法

{{ link.name }}

{{ link.name }}

Plunker的例子

Günter Zöchbauer answered 2019-10-26T10:32:52Z

4 votes

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

在提供的OP的标记中，有一个click事件绑定。 这使我认为这些元素被用作“按钮”。 如果是这样，则可以将它们标记为disabled元素，并按照链接的样式进行样式设置(如果您希望这样)。 (例如，Bootstrap具有内置的“链接”按钮样式，[https://v4-alpha.getbootstrap.com/components/buttons/#examples)]

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

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

Van J. Wilson answered 2019-10-26T10:33:40Z

3 votes

.disabled{ pointer-events: none }

将禁用click事件，但不会禁用tab事件。 要禁用选项卡事件，如果disable标志为true，则可以将tabindex设置为-1。

Menu Item

Darin Cardin answered 2019-10-26T10:34:06Z

3 votes

对于这篇文章，我的回答可能太迟了。 它只能通过anchor标签中的内联css实现。

isDisabled

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

矮人：[https://embed.plnkr.co/TOh8LM/]

vineetk27 answered 2019-10-26T10:34:53Z

0 votes

我用过

tabindex="{{isEditedParaOrder?-1:0}}"

[style.pointer-events]="isEditedParaOrder ?'none':'auto'"

在我的锚标签中，这样它们就不能通过使用制表符使用“ enter”键和指针本身来移动到锚标签，我们基于属性“ isEditedParaO”将其设置为“无”der

guest answered 2019-10-26T10:35:26Z

0 votes

考虑以下解决方案

.disable-anchor-tag {

pointer-events: none;

}

Sahil Ralkar answered 2019-10-26T10:35:52Z

-1 votes

只是用

This a tag is disabled

例：

This a tag is disabled

Pullat Junaid answered 2019-10-26T10:36:15Z

-2 votes

你可以试试这个

Vincent Shen answered 2019-10-26T10:36:38Z