Angular2, wie kann ein Ankerelement korrekt deaktiviert werden?

Question

Ich arbeite an einer Angular2 Anwendung, und ich zeigen müssen - aber disable ein <a>HTML Element. Was ist der richtige Weg, dies zu tun?

Aktualisiert

Bitte beachten Sie die *ngFor, würde dies die Möglichkeit, mit *ngIf und nicht die <a> insgesamt Rendering verhindern.

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

Die Typoskript Komponente hat eine Methode, die wie folgt aussieht:

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

Ich muss eigentlich das Element verhindern klickbare sein, nicht nur erscheinen, dass es mit dem CSS ist. Ich ging davon aus, dass ich zuerst an das Attribut [disabled] binden musste, aber das ist falsch, da das Ankerelement keine disabled Eigenschaft hat.

Ich sah und dachte über die Verwendung der pointer-events: none, aber das verhindert meine Art von cursor: not-allowed arbeiten - und das ist ein Teil der Anforderung.

Answer 1

Angeben pointer-events: none in CSS deaktiviert Eingang Maus aber nicht die Tastatureingabe deaktivieren. Zum Beispiel kann der Benutzer immer noch auf den Link klicken und ihn durch Drücken der Taste Enter oder (unter Windows) ≣ Menü drücken. Sie könnten bestimmte Tastenanschläge deaktivieren, indem Sie das Ereignis keydown abfangen, aber dies würde wahrscheinlich Benutzer verwirren, die auf unterstützende Technologien angewiesen sind.

Wahrscheinlich ist die beste Möglichkeit, eine Verbindung zu deaktivieren, das href Attribut zu entfernen, das es eine non-link macht.Sie können dies mit einem bedingten href Attribut dynamisch tun Bindung:

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

Oder, wie in Günter Zöchbauer Antwort, Sie zwei Verknüpfungen erstellen können, eine normale und eine Behinderte, und verwenden *ngIf das eine oder andere zu zeigen:

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

Hier einige CSS die Verbindung deaktiviert aussehen:

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

Answer 2

Für [routerLink] können Sie:

dieses CSS Hinzufügen sollte das tun, was Sie wollen:

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

Dies das Problem beheben sollte @MichelLiu in den Kommentaren erwähnt:

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

Ein anderer Ansatz

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

Plunker example

Answer 3

Gerade kam in dieser Frage, und wollte ein alt vorschlagen ernteter Ansatz.

Im Markup, das vom OP bereitgestellt wird, gibt es eine Klickereignisbindung. Das lässt mich denken, dass die Elemente als "Knöpfe" verwendet werden. Wenn das der Fall ist, könnten sie als <button> Elemente markiert und wie Links formatiert werden, wenn dies das gewünschte Aussehen ist. (Zum Beispiel Bootstrap hat eine integrierte "Link" Button-Stil, https://v4-alpha.getbootstrap.com/components/buttons/#examples)

Dies hat mehrere direkte und indirekte Vorteile. Es ermöglicht Ihnen, an die Eigenschaft disabled zu binden, die Maus- und Tastaturereignisse automatisch deaktiviert. Sie können den deaktivierten Status basierend auf dem deaktivierten Attribut stylen, sodass Sie die Klasse des Elements nicht bearbeiten müssen. Es ist auch besser für die Zugänglichkeit.

Für eine gute Zuschreibung auf etwa wenn Tasten zu verwenden und wenn Links zu verwenden, finden Sie Links are not buttons. Neither are DIVs and SPANs

Answer 4

du

versuchen

<a [attr.disabled]="someCondition ? true: null"></a>