html - manipulation - que es el dom en angular

Angular2, ¿cuál es la forma correcta de deshabilitar un elemento de anclaje?

Question

Estoy trabajando en una aplicación Angular2 y necesito mostrar, pero disable un elemento HTML <a> . ¿Cuál es la forma correcta de hacer esto?

Actualizado

Tenga en cuenta el *ngFor , esto evitaría la opción de usar *ngIf y no *ngIf el <a> completo.

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

El componente TypeScript tiene un método que se ve así:

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

Necesito evitar que se pueda hacer clic en el elemento, no solo parecer que está con el CSS . Asumí que necesitaba unirme potencialmente al atributo [disabled] al principio, pero esto es incorrecto ya que el elemento de anclaje no tiene una propiedad disabled .

Miré y consideré usar los pointer-events: none pero esto impide que mi estilo de cursor: not-allowed funcione, y esto es parte del requisito.

Answer 1

Acabo de encontrar esta pregunta y quería sugerir un enfoque alternativo.

En el marcado que proporcionó el OP, hay un enlace de evento de clic. Esto me hace pensar que los elementos se están utilizando como "botones". Si ese es el caso, podrían marcarse como elementos <button> y tener el estilo de enlaces, si ese es el aspecto que desea. (Por ejemplo, Bootstrap tiene un estilo de botón de "enlace" incorporado, https://v4-alpha.getbootstrap.com/components/buttons/#examples )

Esto tiene varios beneficios directos e indirectos. Le permite vincularse a la propiedad disabled , que cuando se configura deshabilitará automáticamente los eventos del mouse y del teclado. Le permite diseñar el estado deshabilitado en función del atributo deshabilitado, por lo que no tiene que manipular también la clase del elemento. También es mejor para la accesibilidad.

Para una buena redacción sobre cuándo usar botones y cuándo usar enlaces, vea Enlaces no son botones. Tampoco los DIV y SPAN

Answer 2

Especificar pointer-events: none en CSS deshabilita la entrada del mouse pero no deshabilita la entrada del teclado. Por ejemplo, el usuario aún puede tabular el enlace y "hacer clic" presionando la tecla Intro o (en Windows) la tecla ≣ Menú . Puede deshabilitar pulsaciones de teclas específicas interceptando el evento de pulsación de tecla, pero esto probablemente confundiría a los usuarios que dependen de tecnologías de asistencia.

Probablemente la mejor manera de deshabilitar un enlace es eliminar su atributo href , convirtiéndolo en un no enlace. Puede hacer esto dinámicamente con un enlace de atributo href condicional:

<a *ngFor="let link of links"
   [attr.href]="isDisabled(link) ? null : ''#''"
   [class.disabled]="isDisabled(link)"
   (click)="!isDisabled(link) && onClick(link)">
   {{ link.name }}
</a>

O, como en la respuesta de Günter Zöchbauer, puede crear dos enlaces, uno normal y otro deshabilitado, y usar *ngIf para mostrar uno u otro:

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

Aquí hay algunos CSS para que el enlace se vea deshabilitado:

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

Answer 3

Mi respuesta podría llegar tarde a esta publicación. Se puede lograr a través de CSS en línea dentro de la etiqueta de anclaje solamente.

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

Considerar isDisabled es una propiedad en el componente que puede ser true o false .

Plunker para ello: https://embed.plnkr.co/TOh8LM/

Answer 4

Para [routerLink] puede usar:

Agregar este CSS debe hacer lo que quieras:

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

Esto debería solucionar el problema mencionado por @MichelLiu en los comentarios:

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

Otro enfoque

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

Ejemplo de Plunker

Answer 5

Puedes probar esto

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

Answer 6

Solo usa

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

Ejemplo:

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

Answer 7

he utilizado

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

en mi etiqueta de anclaje para que no puedan moverse a la etiqueta de anclaje usando la pestaña para usar la tecla "enter" y también el puntero en sí mismo, estamos configurando a ''ninguno'' en función de la propiedad ''isEditedParaO rder'' whi

Answer 8

   .disabled{ pointer-events: none }

desactivará el evento de clic, pero no el evento de pestaña. Para deshabilitar el evento de tabulación, puede establecer el índice de tabulación en -1 si el indicador de inhabilitación es verdadero.

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