Angular2, каков правильный способ отключения элемента привязки?

Я работаю над приложением Angular2, и мне нужно отобразить, но disable a <a> HTML-элемент. Каков правильный способ сделать это?

Обновление

Обратите внимание на *ngFor, это предотвратит возможность использования *ngIf и не будет полностью отображать <a>.

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

Компонент TypeScript имеет метод, который выглядит следующим образом:

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

Мне нужно фактически запретить клику элемент, а не просто отображаться с CSS. Я предполагал, что сначала мне нужно связать атрибут [disabled], но это неверно, поскольку элемент привязки не имеет свойства disabled.

Я просмотрел и рассмотрел использование pointer-events: none, но это не позволяет моему стилю cursor: not-allowed работать - и это часть требования.

Ответы

Ответ 1

Задание pointer-events: none в CSS отключает ввод мыши, но не отключает ввод с клавиатуры. Например, пользователь все равно может подключиться к ссылке и "click", нажав клавишу 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)">
   {{ link.name }}
</a>

Или, как и в ответе Гюнтера Цохбауэра, вы можете создать две ссылки, одну нормальную и одну отключенную, и использовать *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>

Вот некоторые CSS, чтобы отключить ссылку:

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

Ответ 2

Для [routerLink] вы можете использовать:

Добавление этого CSS должно делать то, что вы хотите:

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

Это должно исправить проблему, упомянутую @MichelLiu в комментариях:

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

Другой подход

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

Пример плунжера

Ответ 3

Просто наткнулся на этот вопрос и хотел предложить альтернативный подход.

В разметке, предоставленной OP, есть привязка события щелчка. Это заставляет меня думать, что элементы используются как "кнопки". Если это так, они могут быть помечены как элементы <button> и оформлены как ссылки, если это тот вид, который вы желаете. (Например, Bootstrap имеет встроенный стиль кнопки ссылки, https://v4-alpha.getbootstrap.com/components/buttons/#examples)

Это имеет несколько прямых и косвенных преимуществ. Это позволяет вам привязываться к свойству disabled, которое при установке автоматически отключает события мыши и клавиатуры. Он позволяет вам стилизовать отключенное состояние на основе отключенного атрибута, поэтому вам не нужно также управлять классом элемента. Это также лучше для доступности.

Для хорошей записи о том, когда использовать кнопки и когда использовать ссылки, см. Ссылки не являются кнопками. Также нет DIV и SPAN.

Ответ 4

   .disabled{ pointer-events: none }

отключит событие click, но не событие tab. Чтобы отключить событие табуляции, вы можете установить tabindex на -1, если флаг отключения установлен в true.

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

Ответ 5

Мой ответ может быть опоздал на этот пост. Это может быть достигнуто с помощью встроенного CSS только внутри тега привязки.

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

Учитывая, что isDisabled - это свойство компонента, которое может быть true или false.

Плункер для него: https://embed.plnkr.co/TOh8LM/

Ответ 6

я использовал

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

в моем теге привязки, чтобы они не могли перейти к тегу привязки с помощью вкладки, чтобы использовать клавишу "enter", а также сам указатель, мы устанавливаем "нет" на основе свойства "isEditedParaO rder" whi

Ответ 7

Просто используйте CSS-события указателя, как говорили другие люди, но сделайте это в своей глобальной таблице стилей.

a[disabled] {
    pointer-events: none;
}

Ответ 8

рассмотрим следующее решение

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

Ответ 9

Просто используйте

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

Пример:

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

Ответ 10

Вы можете попробовать это

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