En mi aplicación Angular 2, intento deshabilitar un enlace de enrutador sin éxito. Intenté manejar el evento de clic en el evento de click (con event.preventDefault() y event.stopPropagation() ) pero no funciona.
¿Cómo puedo desactivar un routerLink?
Deshabilite pointer-events en el elemento a través de CSS:
<a [routerlink]="xxx" [class.disabled]="disabled ? true : null">Link</a> a.disabled { pointer-events: none; cursor: default; }Consulte también Angular2, ¿cuál es la forma correcta de deshabilitar un elemento de anclaje?
o
<a *ngIf="isEnabled" [routerlink]="xxx">Link</a> <div *ngIf="!isEnabled">not a link</div>o para reutilizar fácilmente la plantilla de enlace deshabilitada
<ng-template #disabledLink> <div *ngIf="!isEnabled">not a link</div> </ng-template> <a *ngIf="isEnabled; else disabledLink" [routerLink]="xxx">Link</a> [routerLink]="null" (y undefined ) ahora se usa oficialmente para deshabilitar el routerLink .
(ver Documentos )
Así que esto es suficiente:
<a [routerLink]="linkEnabled ? 'path' : null">Link</a> [routerLink]="null" (y undefined ) se trata como una forma abreviada de una matriz vacía de comandos. Por lo tanto, hace que el enlace del routerLink se vincule a la ruta actual/activa. Este comportamiento nos permite abusar de la directiva routerLinkActive para nuestro propósito:
Modelo:
<a [routerLink]="linkEnabled ? 'path' : null" [routerLinkActive]="linkEnabled ? 'is_active' : 'is_disabled'">Link</a>CSS opcional:
.is_disabled { cursor: default; text-decoration: none; } .is_active { // your style for active router link } Demostración en vivo (Angular 10):
Ver demostración en StackBlitz
Descripción detallada:
Cuando linkEnabled devuelve false , null hará que routerLink se vincule a la ruta actual/activa.
Si routerLink vincula a la ruta activa, se aplicará la clase que se especifica en routerLinkActive . Eso será is_disabled en este caso.
Allí podemos especificar cómo debe aparecer el routerLink deshabilitado.
routerLink a la ruta activa no activará un evento de navegación.
Acabo de tener cierto éxito con un problema similar: tener una serie de enlaces de navegación en un ngFor, algunos requerían [routerLink], mientras que otros requerían (hacer clic). Mi problema era que todos los enlaces dependían de [routerLink] para [routerLinkActive] , por lo que tuve que detener routerLink, sin tocar su valor.
`<a [routerLink]="item.link" routerLinkActive="isActive"> <span (click)="item.click ? item.click($event) : void> </a>`con:
`click: ($event) => { $event.stopPropagation(); // Only seems to $event.preventDefault(); // work with both // Custom onClick logic }`Como el lapso está dentro, puede estar seguro de que la cancelación del evento ocurre antes de que llegue a [routerLink], mientras que routerLinkActive aún se aplicará.