html - container - ng-content angular 6




Angular2,禁用錨元素的正確方法是什麼? (6)

你可以試試這個

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

我正在開發一個 Angular2 應用程序,我需要顯示 - 但 disable <a> HTML 元素。 這樣做的正確方法是什麼?

更新

請注意 *ngFor ,這將阻止使用 *ngIf 而不是完全呈現 <a> 的選項。

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

TypeScript 組件有一個如下所示的方法:

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

我需要實際上阻止元素被點擊,而不僅僅是出現在 CSS中 。 我假設我首先需要綁定到 [disabled] 屬性,但這是不正確的,因為錨元素沒有 disabled 屬性。

我查看並考慮使用 pointer-events: none 但這會阻止我的 cursor: not-allowed 樣式 cursor: not-allowed 工作 - 這是要求的一部分。


剛剛遇到這個問題,並想提出另一種方法。

在OP提供的標記中,有一個click事件綁定。 這讓我覺得元素被用作“按鈕”。 如果是這種情況,可以將它們標記為 <button> 元素並設置為類似鏈接,如果這是您想要的外觀。 (例如,Bootstrap有一個內置的“鏈接”按鈕樣式, https://v4-alpha.getbootstrap.com/components/buttons/#examples

這有幾個直接和間接的好處。 它允許您綁定到 disabled 屬性,該屬性在設置時將自動禁用鼠標和鍵盤事件。 它允許您根據disabled屬性設置禁用狀態的樣式,因此您不必操作元素的類。 它也更適合可訪問性。

有關何時使用按鈕以及何時使用鏈接的詳細說明,請參閱 鏈接不是按鈕。 DIV和SPAN都不是


對於 [routerLink] 您可以使用:

添加這個CSS應該做你想要的:

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

這應該解決@MichelLiu在評論中提到的問題:

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

另一種方法

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

Plunker的例子


我用過

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

在我的錨標籤中,以便他們無法通過使用tab來使用“enter”鍵和指針本身,我們根據屬性'isEditedParaO rder'whi設置為'none'


指定 pointer-events: none CSS中的 pointer-events: none 禁用鼠標輸入但不禁用鍵盤輸入。 例如,用戶仍然可以選擇鏈接並通過按 Enter 鍵或(在Windows中)按 ≣菜單 鍵“單擊”它。 您可以通過攔截 keydown 事件來禁用特定鍵擊,但這可能會使依賴於輔助技術的用戶 keydown 困惑。

禁用鏈接的最佳方法可能是刪除其 href 屬性,使其成為非鏈接。 您可以使用條件 href 屬性綁定動態執行此操作:

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

或者,如在GünterZöchbauer的回答中,您可以創建兩個鏈接,一個是正常的,一個是禁用的,並使用 *ngIf 來顯示其中一個:

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

這裡有一些CSS使鏈接看起來被禁用:

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

   .disabled{ pointer-events: none }

將禁用click事件,但不禁用tab事件。 要禁用tab事件,如果disable標誌為true,則可以將tabindex設置為-1。

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




angular2-template