Vyhledávání na webu

html - Angular2, jaký je správný způsob, jak zakázat prvek kotvy?

Pracuji na aplikaci Angular2 a potřebuji zobrazit -- ale zakázat <a> HTML element. Jaký je správný způsob, jak to udělat?

Aktualizováno

Vezměte prosím na vědomí *ngFor, to by znemožnilo možnost použití *ngIf a úplně nevykreslovat <a>.

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

Komponenta TypeScript má metodu, která vypadá takto:

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

Potřebuji skutečně zabránit tomu, aby byl prvek kliknutelný, a ne jen aby to vypadalo, že je, pomocí CSS. Původně jsem předpokládal, že bych se mohl případně připojit k atributu [disabled], ale to je nesprávné, protože kotevní prvek nemá vlastnost disabled.

Podíval jsem se na možnost použití pointer-events: none, ale to zabraňuje tomu, aby můj styl cursor: not-allowed fungoval — a to je součást požadavku.

Odpověď č. 1

Určení pointer-events: none v CSS zakáže vstup myší, ale nezakáže vstup z klávesnice. Například uživatel se stále může přesunout na odkaz pomocí tabulátoru a „kliknout“ na něj stisknutím klávesy Enter nebo (ve Windows) klávesy ≣ Menu. Můžete zakázat konkrétní stisky kláves zachycením události keydown, ale to by pravděpodobně zmátlo uživatele spoléhající se na asistivní technologie.

Nejlepší způsob, jak pravděpodobně zakázat odkaz, je odstranit jeho atribut href, čímž se z něj stane neodkaz. Můžete to udělat dynamicky s podmíněným vazbou atributu href:

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

Nebo, jak je uvedeno v odpovědi Güntera Zöchbauera, můžete vytvořit dva odkazy, jeden normální a jeden deaktivovaný, a použít *ngIf k zobrazení jednoho nebo druhého:

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

Tady je nějaký CSS kód, který způsobí, že odkaz bude vypadat jako zakázaný:

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

Odpověď č. 2

Pro [routerLink] můžete použít:

Přidání tohoto CSS by mělo udělat to, co chcete:

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

To by mělo vyřešit problém zmíněný @MichelLiu v komentářích:

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

Další přístup

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

Příklad Plunker

Odpověď č. 3

Moje odpověď může být na tento příspěvek pozdě. Lze toho dosáhnout pouze pomocí inline CSS uvnitř značky anchor.

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

Vzhledem k tomu, že isDisabled je vlastnost v komponentě, která může být true nebo false.

Plunker pro to: https://embed.plnkr.co/TOh8LM/

Související články