Angular 2의 요소에 RouterLink 또는 다른 속성 지시어를 조건부로 추가합니다.

Angular 2의 요소에 RouterLink 또는 다른 속성 지시어를 조건부로 추가합니다.

Angular 2에서 만약 내가 다음과 같은 요소를 가지고 있다면.<button></button>다음과 같은 속성 지시어를 조건부로 추가하려면 어떻게 해야 합니까?[routerLink]="['SomeRoute']그것에?

또는 속성에 조건을 간단히 추가할 수 있습니다.

<button [routerLink]="myVar ? ['/myScreen'] : []"></button>

myVar가 참인 경우에만 '/myScreen'으로 리디렉션합니다.

제가 알기로는, 이것을 할 수 있는 직접적인 방법은 없습니다.몇 가지 해결 방법이 있습니다.저는 다음과 같은 것을 사용했습니다.

<button *ngIf="condition" [routerLink]="['SomeRoute']"></button>
<button *ngIf="!condition"></button>

여기에도 비슷한 논의가 있습니다: 링크

요소를 복제하지 않고 조건에 따라 클릭하지 않으려면 다음을 수행할 수 있습니다.

<button 
  [style.pointer-events]="condition ? 'auto' : 'none'" 
  routerLink="/some/route"
>
</button>

   <div [ngClass] ='{"disabled-link":!isMicrositeEnable,"cursor-pointer":"isMicrositeEnable"}' [routerLink]="isMicrositeEnable ? ['/microsite'] : []">

이것은 작업 샘플입니다.둘 이상의 조건을 가져와야 할 경우 다음과 같이 내부 조건을 가질 수 있습니다.

<a class="dropdown-item" href="javascript:void(0);" [routerLink]="app.treatment === 'X' ? ['/route1', app._id] : app.treatment === 'Y' ? ['/route2', app._id] : ['/route3', app._id] ">Go</a>

이를 위한 가장 간단한 방법은 다음과 같이 3진 연산자 안에 조건을 감싸는 것입니다.

<button [routerLink]="(myVar ? if_true : if_not_true)"></button>

세부 사항입니다.탐색을 위해 버튼을 사용하지 않도록 하십시오.스크린 리더들은 그것이 즉시 사용할 수 있는 탐색이라는 것을 이해하지 못할 것입니다.이제 화면 판독기가 수행하는 작업을 알려주는 아리아 레이블을 추가해야 합니다.그러면 코드가 더 추가됩니다.그러나 간단한 해결책은 [routerLink]를 앵커 링크에 추가하는 것입니다.그런 다음 단추 모양으로 스타일링합니다.하지만 사람들은 보통 그 때 무슨 일이 일어날지 알기 때문에 저는 표준 파란색 링크를 사용하는 것을 선호합니다.예: 단추를 마우스 오른쪽 단추로 클릭하여 새 탭에서 열려고 하지 않습니다.작업을 위한 버튼과 탐색을 위한 앵커 링크

이것은 Angular 10에서 저에게 효과가 있었습니다.

<button routerLink="{{MyVar == true ? '/route/' + item.id : '/same/route'}}"></button>

나는 routerLink로 버튼을 사용하지 않을 것입니다.A에서는 이를 위해 버튼으로 스타일이 지정된 앵커 링크를 사용합니다.버튼 요소는 작업용이고 앵커는 라우팅/탐색용입니다.아래 코드는 브라우저/화면 판독기 등에 무엇인지 알려줍니다.

<a *ngIf="condition" class="make_it_look_like_a_button" [routerLink]="['somehere']">test</a>
<button *ngIf="!condition">Test</button>

위의 링크 케이스는 '새 탭에서 열립니다.마우스 오른쪽 단추로 클릭합니다.하지만 단점은 그것이 단추처럼 스타일일 때 아무도 그것을 생각하지 않는다는 것입니다.

언급URL : https://stackoverflow.com/questions/36753819/conditionally-add-routerlink-or-other-attribute-directives-to-an-element-in-angu