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

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

---

나는 일하고 있어요 Angular2의 응용 프로그램, 나는 표시해야 -하지만 HTML의 요소입니다. 이를 수행하는 올바른 방법은 무엇입니까?disable<a>

업데이트 됨

을 유의하시기 바랍니다 *ngFor,이 사용할 수있는 옵션 방지 할 수 *ngIf와 렌더링되지 않는 <a>모두를.

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

타이프 라이터의 구성 요소는 모습이 좋아하는 방법이있다 :

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

CSS 와 함께있는 것처럼 보이기 만하는 것이 아니라 실제로 요소를 클릭 할 수 없도록해야합니다 . [disabled]처음 에는 잠재적으로 속성에 바인딩해야한다고 가정 했지만 앵커 요소에 disabled속성 이 없기 때문에 이것은 올바르지 않습니다 .

나는을 (를) 살펴보고 사용을 고려 pointer-events: none했지만 이로 인해 내 스타일이 cursor: not-allowed작동 하지 않으며 이것이 요구 사항의 일부입니다.

---

pointer-events: noneCSS에서 지정 하면 마우스 입력이 비활성화되지만 키보드 입력은 비활성화되지 않습니다. 예를 들어, 사용자는 여전히 링크를 탭하고 Enter키 또는 (Windows의 경우) 키 를 눌러 링크를 "클릭"할 수 ≣ Menu있습니다. 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ünter Zö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;
}

---

다음 [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>  

플 런커 예

---

방금이 질문을보고 다른 접근 방식을 제안하고 싶었습니다.

In the markup the OP provided, there is a click event binding. This makes me think that the elements are being used as "buttons". If that is the case, they could be marked up as <button> elements and styled like links, if that is the look you desire. (For example, Bootstrap has a built-in "link" button style, https://v4-alpha.getbootstrap.com/components/buttons/#examples)

This has several direct and indirect benefits. It allows you to bind to the disabled property, which when set will disable mouse and keyboard events automatically. It lets you style the disabled state based on the disabled attribute, so you don't have to also manipulate the element's class. It is also better for accessibility.

For a good write-up about when to use buttons and when to use links, see Links are not buttons. Neither are DIVs and SPANs

---

   .disabled{ pointer-events: none }

will disable the click event, but not the tab event. To disable the tab event, you can set the tabindex to -1 if the disable flag is true.

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

---

My answer might be late for this post. It can be achieved through inline css within anchor tag only.

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

Considering isDisabled is a property in component which can be true or false.

Plunker for it: https://embed.plnkr.co/TOh8LM/

---

I have used

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

in my anchor tag so that they can not move to anchor tag by using tab to use "enter" key and also pointer itself we are setting to 'none' based on property 'isEditedParaO rder' whi

---

Just use

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

Example:

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

---

You can try this

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

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