Angular2, 앵커 요소를 비활성화하는 올바른 방법은 무엇입니까?

Angular2, 앵커 요소를 비활성화하는 올바른 방법은 무엇입니까?

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일을 하는 것으로부터 -- 그리고 이것은 요구 사항의 일부입니다.

지정pointer-events: noneCSS에서는 마우스 입력을 비활성화하지만 키보드 입력은 비활성화하지 않습니다.예를 들어, 사용자는 여전히 링크를 탭하여 키를 누르거나 (Windows에서) 키를 눌러 "클릭"할 수 있습니다.특정 키 입력을 사용하지 않도록 설정할 수 있습니다.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>

또는 귄터 쇠흐바우어의 답변과 같이 일반 링크와 비활성 링크 두 개를 생성하고 다음을 사용할 수 있습니다.*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;
}

위해서[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>  

플런커 예제

제가 이 게시물에 답이 늦을 수도 있습니다.앵커 태그 내에서만 인라인 CSS를 통해 달성할 수 있습니다.

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

고려하면isDisabled다음과 같은 구성 요소의 속성입니다.true또는false.

플런커 for it: https://embed.plnkr.co/TOh8LM/

이 문제를 우연히 발견했고, 다른 접근법을 제안하고 싶었습니다.

OP가 제공한 마크업에는 클릭 이벤트 바인딩이 있습니다.이것은 요소들이 "버튼"으로 사용되고 있다고 생각하게 합니다.만약 그렇다면, 그들은 다음과 같이 표시될 수 있습니다.<button>요소 및 링크 스타일(예를 들어, 부트스트랩에는 "링크" 단추 스타일, https://v4-alpha.getbootstrap.com/components/buttons/ #butdown)이 내장되어 있습니다.

이것은 몇 가지 직접적이고 간접적인 이점이 있습니다. 있다니습에 수 .disabled속성을 설정하면 마우스 및 키보드 이벤트가 자동으로 비활성화됩니다.비활성화된 특성을 기준으로 비활성화된 상태를 스타일화할 수 있으므로 요소의 클래스도 조작할 필요가 없습니다.그것은 또한 접근성을 위해 더 좋습니다.

단추 사용 시기와 링크 사용 시기에 대한 자세한 내용은 링크가 단추가 아닙니다를 참조하십시오. DIV 및 SPAN도 마찬가지입니다.

다음과 같은 해결책을 고려합니다.

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

   .disabled{ pointer-events: none }

클릭 이벤트는 비활성화되지만 탭 이벤트는 비활성화되지 않습니다.탭 이벤트를 비활성화하려면 비활성화 플래그가 참이면 탭 인덱스를 -1로 설정할 수 있습니다.

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

이것은 탭 역할을 하는 앵커 태그에 대한 것입니다.

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

class.disabled 대신 disabled 속성으로 변수를 바인딩할 수도 있습니다.버튼, 입력 및 드롭다운만 사용됩니다.HTML 사용 안 함 특성

예:

<button [disabled]="isDisabled">Test</button>

데모

사용한 적이 있습니다.

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

내 앵커 태그에서 탭을 사용하여 "입력" 키를 사용하고 포인터 자체를 사용하여 앵커 태그로 이동할 수 없도록 'isEditParaOrder' 속성을 기준으로 '없음'으로 설정하고 있습니다. whi

해보세요.

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

그냥 사용하기

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

예:

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

언급URL : https://stackoverflow.com/questions/36985112/angular2-what-is-the-correct-way-to-disable-an-anchor-element