web-dev-qa-db-fra.com

Comment puis-je désactiver conditionnellement l'attribut routerLink?

Dans mon Angular 2, j'essaie de désactiver un routeurLink sans succès. J'ai essayé de gérer l'événement click sur l'événement click (avec event.preventDefault() et event.stopPropagation()) mais cela ne fonctionne pas.

Comment puis-je désactiver un routeur lien?

angularangular2-routing
46
TizianoL

Désactiver pointer-events sur le

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

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

Voir aussi Angular2, quelle est la bonne façon de désactiver un élément d'ancrage?

ou

<a *ngIf="isEnabled" [routerlink]="xxx">Link</a>
<div *ngIf="!isEnabled">not a link</div>

ou pour réutiliser facilement le modèle de lien désactivé

<ng-template #disabledLink>
  <div *ngIf="!isEnabled">not a link</div>
</ng-template>
<a *ngIf="isEnabled; else disabledLink" [routerlink]="xxx">Link</a>
76
Günter Zöchbauer

Pas besoin de désactiver les événements de pointeur:

Modèle:

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

CSS optionnel:

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

Description:

Lorsque homeLinkEnabled renvoie false, null fera en sorte que routerLink soit lié à la route actuelle/active.

Si routerLink est lié à la route active, la classe spécifiée dans routerLinkActive sera appliquée.

Nous pouvons y spécifier comment doit apparaître le routeur désactivé.

routerLink à la route active ne déclenchera pas un événement de navigation.

43
Martin Schneider

Je viens de connaître un certain succès avec un problème similaire: avoir un tableau de liens de navigation dans un ngFor, certains requéraient [routeurLink], d'autres, un clic (cliquez) - mon problème était que tous les liens s'appuyaient sur [routerLink] pour [routerLinkActive] , j'ai donc dû arrêter routerLink, sans toucher à sa valeur.

`<a [routerLink]="item.link" routerLinkActive="isActive">
    <span (click)="item.click ? item.click($event) : void>
</a>`

avec:

`click: ($event) => {
    $event.stopPropagation(); // Only seems to
    $event.preventDefault(); // work with both
    // Custom onClick logic
}`

Comme l'intervalle est à l'intérieur, vous pouvez être sûr que l'annulation de l'événement se produit avant qu'il ne bouillonne jusqu'à [routerLink], alors que routerLinkActive s'appliquera toujours.

2
Mike Muniom McBriar

Désactiver pointer-events sur toute balise HTML:

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

'none' résout de désactiver pointer-events, c’est-à-dire désactiver le lien.

null décide d'ignorer le style.

1
Jorge