Ich arbeite an einer Angular2- Anwendung und muss anzeigen - aber disable
ein <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 *ngIf
und 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 disabled
Eigenschaft hat.
Ich habe mir das angeschaut und darüber nachgedacht, es zu verwenden, pointer-events: none
aber dies verhindert, dass mein cursor: not-allowed
Arbeitsstil funktioniert - und dies ist Teil der Anforderung.
quelle
<a>
Element fehlt undhref
es immer noch anklickbar ist, habe ich dies gerade überprüft ... was jetzt? Immer noch nicht perfekt.click
Ereignis zu behandeln .[attr.disabled]="isDisabled(link)"
im <a> -Tag verwenden.[attr.disabled]
auf einem<a>
Etikett. Es ist nicht standardkonform und funktioniert nur in Internet Explorer, nicht in Chrome oder Firefox.Für
[routerLink]
Sie können verwenden:Das Hinzufügen dieses CSS sollte das tun, was Sie wollen:
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
quelle
[disabled]
, warum nicht?(focus)="isDisabled(link) ? false : true"
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 binden
disabled
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
quelle
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
isDisabled
wird eine Eigenschaft in einer Komponente, dietrue
oder sein kannfalse
.Plunker dafür: https://embed.plnkr.co/TOh8LM/
quelle
routerLink
Direktive innerhalb desdeaktiviert 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>
quelle
Betrachten Sie die folgende Lösung
quelle
Dies gilt für Ankertags, die als Registerkarten dienen:
[ngStyle]="{'pointer-events': isSaving ? 'none': 'auto'}"
quelle
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'
quelle
Sie können dies versuchen
<a [attr.disabled]="someCondition ? true: null"></a>
quelle
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>
quelle