clr-icon 사용자 정의 요소의 모양을 어떻게 동적으로 변경할 수 있습니까? 그들은 당신이 아이콘을 설정하는 모양 속성을 사용할 수 있음을 보여 <a href="https://vmware.github.io/clarity/icons/how-to-use" rel="nofollow noreferrer">Clarity Icon docs</a>에서

Question

은 다음과 같이 모양 :

<clr-icon shape="info-circle" size="16"></clr-icon> 

내 각 템플릿에서 나는이 같은 CLR-아이콘 요소를 사용하고 있습니다 :

<clr-icon [shape]="myShape"></clr-icon> 

그리고 myShape에 결합 된 형태의 문자열 값을 설정하기 위해 내 구성 요소를 사용 : 버튼을 사용하여

export class MyComponent { 
    public myShape = 'volume-up'; 

    changeShape() { 
     if(this.myShape === 'volume-up') { 
      this.myShape = 'volume-mute'; 
      return; 
     } 
     this.myShape = 'volume-up; 
    } 
} 

(미도 템플릿에서) 아이콘의 모양을 동적으로 변경하기 위해 changeShape()을 실행하고 싶지만 아무 것도 나타나지 않습니다. 무엇이 누락 되었습니까?

Answer 1

각형 템플릿 구문 바인딩 대상 섹션을 참조하십시오. 링크 : https://angular.io/guide/template-syntax#binding-targets

당신은 사용할 필요가 :

[attr.shape]="myShape" 

데모 : https://plnkr.co/edit/m4v5hXMxWRL5ObD3TPaO?p=preview