Tengo un número de enlace en un proyecto Angular (usando Angular 2), similar a:
<a [routerLink]="..." [routerLinkActive]="..." [routerLinkActiveOptions]="..."> Link </a>Me gustaría deshabilitar algunos de estos dependiendo del contexto/estado (cambiando el color y evitando que ocurra la acción).
Para el estilo, he añadido al enlace:
[class.disabled]="!isValidLink()" Esto me permite mostrar los enlaces como deshabilitados, pero aún necesito evitar el enrutamiento. Si agrego target="_self" al elemento, evita el enrutamiento, pero necesito hacerlo de manera condicional, dependiendo de algún estado.
¿Hay alguna forma de enrutamiento compatible para hacer esto, o alguna otra implementación que funcione?
Editar: Establecer pointer-events en ninguno en css evitaría hacer clic en el enlace, pero estoy buscando una solución que evite que los eventos del teclado lo activen también.
Otra forma de deshabilitar routerLink: reemplazar el método onClick .
Para hacer esto, debe crear una directiva:
import { Directive, Input, Optional } from '@angular/core'; import { RouterLink, RouterLinkWithHref } from '@angular/router'; @Directive({ selector: '[routerLink][disableLink]' }) export class DisableLinkDirective { @Input() disableLink: boolean; constructor( // Inject routerLink @Optional() routerLink: RouterLink, @Optional() routerLinkWithHref: RouterLinkWithHref ) { const link = routerLink || routerLinkWithHref; // Save original method const onClick = link.onClick; // Replace method link.onClick = (...args) => { if (this.disableLink) { return routerLinkWithHref? false: true; } else { return onClick.apply(link, args); } }; } }Uso:
<a routerLink="/search" [disableLink]="!isLogged">Search</a>Pruébalo así:
<a [routerLink]="..." [class.disabled]="!isValidLink()" (keydown.enter)="isValidLink()">Link</a>¿Podrías hacer dos etiquetas de anclaje?
<a *ngIf="onCase" [routerLink]="..." [routerLinkActive]="..." [routerLinkActiveOptions]="..."> Link </a> <a *ngIf="offcase" [class.disabled]="!isValidLink()"> Link </a>