Angular2, wie kann man ein Ankerelement richtig deaktivieren?

Ich arbeite an einer Angular2- Anwendung und muss anzeigen - aber disableein <a> HTML- Element. Was ist der richtige Weg, um dies zu tun?

Aktualisiert

Bitte beachten Sie *ngFor, dass dies die Option verhindern würde, das Ganze zu verwenden *ngIfund nicht zu rendern <a>.

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

Die TypeScript- Komponente verfügt über eine Methode, die folgendermaßen aussieht:

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

Ich muss tatsächlich verhindern, dass das Element anklickbar ist, und nicht nur den Eindruck erwecken, dass es sich um das CSS handelt . Ich ging davon aus, dass ich zuerst möglicherweise an das [disabled]Attribut binden musste , aber dies ist falsch, da das Ankerelement keine disabledEigenschaft hat.

Ich habe mir das angeschaut und darüber nachgedacht, es zu verwenden, pointer-events: noneaber dies verhindert, dass mein cursor: not-allowedArbeitsstil funktioniert - und dies ist Teil der Anforderung.

Wenn Sie pointer-events: nonein CSS angeben, wird die Mauseingabe deaktiviert, die Tastatureingabe jedoch nicht. Beispielsweise kann der Benutzer weiterhin auf den Link klicken und ihn durch Drücken der EnterTaste oder (unter Windows) der ≣ MenuTaste "anklicken" . Sie könnten bestimmte Tastenanschläge deaktivieren, indem Sie das keydownEreignis abfangen. Dies würde jedoch wahrscheinlich Benutzer verwirren, die sich auf unterstützende Technologien verlassen.

Der wahrscheinlich beste Weg, einen Link zu deaktivieren, besteht darin, sein hrefAttribut zu entfernen und ihn zu einem Nicht-Link zu machen. Sie können dies dynamisch mit einer bedingten hrefAttributbindung tun :

<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 der Antwort von Günter Zöchbauer, können Sie zwei Links erstellen, einen normalen und einen deaktivierten, und verwenden *ngIf, um den einen oder anderen anzuzeigen:

<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 ist etwas CSS, damit der Link deaktiviert aussieht:

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

Für [routerLink]Sie können verwenden:

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

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

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

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

Ich bin gerade auf diese Frage gestoßen und wollte einen alternativen Ansatz vorschlagen.

In dem vom OP bereitgestellten Markup gibt es eine Klickereignisbindung. Dies lässt mich denken, dass die Elemente als "Schaltflächen" verwendet werden. Wenn dies der Fall ist, können sie als <button>Elemente markiert und wie Links gestaltet werden, wenn dies der gewünschte Look ist. (Bootstrap verfügt beispielsweise über einen integrierten "Link" -Schaltflächenstil. https://v4-alpha.getbootstrap.com/components/buttons/#examples) ).)

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

Eine ausführliche Beschreibung der Verwendung von Schaltflächen und der Verwendung von Links finden Sie unter Links sind keine Schaltflächen. Weder sind DIVs noch SPANs

Meine Antwort könnte für diesen Beitrag zu spät sein. Dies kann nur durch Inline-CSS innerhalb des Ankertags erreicht werden.

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

Berücksichtigt isDisabledwird eine Eigenschaft in einer Komponente, die trueoder sein kann false.

Plunker dafür: https://embed.plnkr.co/TOh8LM/

   .disabled{ pointer-events: none }

deaktiviert das Klickereignis, jedoch nicht das Registerkartenereignis. Um das Tab-Ereignis zu deaktivieren, können Sie den Tabindex auf -1 setzen, wenn das Deaktivierungsflag wahr ist.

<li [routerLinkActive]="['active']" [class.disabled]="isDisabled">
     <a [routerLink]="['link']" tabindex="{{isDisabled?-1:0}}" > Menu Item</a>
</li>

Betrachten Sie die folgende Lösung

.disable-anchor-tag { 
  pointer-events: none; 
}

Dies gilt für Ankertags, die als Registerkarten dienen:

[ngStyle]="{'pointer-events': isSaving ? 'none': 'auto'}"

Ich habe benutzt

tabindex="{{isEditedParaOrder?-1:0}}" 
[style.pointer-events]="isEditedParaOrder ?'none':'auto'" 

In meinem Ankertag, damit sie nicht zum Ankertag wechseln können, indem sie die Tabulatortaste verwenden, um die Eingabetaste und auch den Zeiger selbst zu verwenden, setzen wir basierend auf der Eigenschaft 'isEditedParaO rder' whi 'none'

Sie können dies versuchen

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

Benutz einfach

<a [ngClass]="{'disabled': your_condition}"> This a tag is disabled</a>

Beispiel:

 <a [ngClass]="{'disabled': name=='junaid'}"> This a tag is disabled</a>