link - router.navigate angular 6

¿Cómo puedo deshabilitar condicionalmente el atributo routerLink?

Question

En mi aplicación Angular 2, estoy tratando de deshabilitar un routerLink sin ningún éxito. Intenté manejar el evento click en el evento click (con event.preventDefault() y event.stopPropagation() ) pero no funciona.

¿Cómo puedo desactivar un routerLink?

Answer 1

No es necesario deshabilitar ningún evento de puntero:

Modelo:

<a [routerLink]="homeLinkEnabled ? ''/home'' : null" routerLinkActive="is-active">Home</a>

CSS opcional:

.is-active {
    cursor: default;
    text-decoration: none;
}

Descripción:

Cuando homeLinkEnabled devuelve false , null hará que routerLink vincule a la ruta actual / activa.

Si routerLink vincula a la ruta activa, se aplicará la clase que se especifica en routerLinkActive .

Allí podemos especificar cómo debe aparecer el routerLink deshabilitado.

routerLink a la ruta activa no activará un evento de navegación.

Answer 2

Acabo de tener éxito con un problema similar: tener una matriz de enlaces de navegación en un ngFor, algunos requerían [routerLink], mientras que otros requerían (clic) - mi problema era que todos los enlaces dependían de [routerLink] para [routerLinkActive] , así 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 se produce antes de que aparezca en [routerLink], mientras que routerLinkActive aún se aplicará.

Answer 3

Desactivar pointer-events en el

<a [routerlink]="xxx" [class.disabled]="disabled ? true : null">Link</a>

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

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

Answer 4

Deshabilitar pointer-events en cualquier etiqueta html:

<div [routerLink]="[''/home'', { foo: bar }]"
     [ngStyle]="{''pointer-events'': myLinkEnabled ? ''none'' : null}">
     Click me
</div>

''none'' resuelve deshabilitar pointer-events , es decir, deshabilitar el enlace.

null resuelve ignorar el estilo.