Angular 2의 ngClass 내부 동적 클래스 이름

ngClass표현식 내에서 값을 보간해야 하는데 작동하지 않습니다.

나는 나에게 의미가있는 유일한 해결책 인이 솔루션을 시도했지만이 두 가지가 보간으로 실패했습니다.

<button [ngClass]="{'{{namespace}}-mybutton': type === 'mybutton'}"></button>
<button [ngClass]="{namespace + '-mybutton': type === 'mybutton'}"></button>

이것은 보간과 함께 작동하지만 전체 문자열이 클래스로 추가되기 때문에 동적으로 추가 된 클래스에서는 실패합니다.

<button ngClass="{'{{namespace}}-mybutton': type === 'mybutton'}"></button>

그래서 제 질문은 ngClass이와 같이 동적 클래스 이름을 어떻게 사용 합니까?

시험

<button [ngClass]="type === 'mybutton' ? namespace + '-mybutton' : ''"></button>

대신.

또는

<button [ngClass]="[type === 'mybutton' ? namespace + '-mybutton' : '']"></button>

또는

<button class="{{type === 'mybutton' ? namespace + '-mybutton' : ''}}"></button>

작동하지만, 사용의 추가 혜택을 ngClass은 이 있다는 것입니다 하지 덮어 쓰기 다른 클래스 않는 다른 방법으로 추가됩니다 (예를 들어, [class.xyz]지침 또는 class같은 속성 등) class수행을.

Angular 9 업데이트

새로운 컴파일러 인 Ivy는 동일한 요소에 다른 유형의 클래스 바인딩이있을 때 발생하는 일에 대해 더 명확하고 예측 가능성을 제공합니다. 여기에서 자세히 알아보세요.

ngClass 는 세 가지 유형의 입력을받습니다.

• 객체 : 각 키는 CSS 클래스 이름에 해당하며, key 'key' "key"모두 동일하고 [key]AFAIK가 지원되지 않기 때문에 동적 키를 가질 수 없습니다 .
• 배열 : 삼항 연산자가 작동하지만 조건없이 클래스 목록 만 포함 할 수 있습니다 .
• 문자열 / 표현식 : 일반 클래스 속성과 동일

이것은 작동합니다

<button [ngClass]="{[namespace + '-mybutton']: type === 'mybutton'}"></button>

그러나 Angular는이 구문을 사용합니다. 나는 이것을 버그라고 생각합니다. 참조 https://stackoverflow.com/a/36024066/217408

나머지는 유효하지 않습니다. []와 함께 사용할 수 없습니다 {{}}. 둘 중 하나입니다. {{}}객체가에 전달되어야하기 때문에이 경우 원하는 결과로 이어지지 않는 문자열 화 된 결과를 바인딩합니다 ngClass.

플 런커 예

해결 방법으로 @A_Sing 또는

<button [ngClass]="type === 'mybutton' ? namespace + '-mybutton' : ''"></button>

사용할 수 있습니다.

다음 은 여러 조건이있는 여러 클래스에 대해 수행하는 작업의 예입니다 .

[ngClass]="[variableInComponent || !anotherVariableInComponent ? classes.icon.large : classes.icon.small, editing ? classes.icon.editing : '']"

여기서 :
classes다양한 클래스 이름의 문자열을 포함하는 객체입니다. 예 :class.icon.large = "app__icon--large"

역동적입니다! 조건이 업데이트되면 업데이트됩니다.

클래스 바인딩을 구현하는 동안 염두에 두어야 할 몇 가지 중요한 사항을 언급하고 싶습니다.

    [ngClass] = "{
    'badge-secondary': somevariable  === value1,
    'badge-danger': somevariable  === value1,
    'badge-warning': somevariable  === value1,
    'badge-warning': somevariable  === value1,
    'badge-success': somevariable  === value1 }" 

여기서 클래스는 하나의 조건이 충족되어야하기 때문에 올바르게 바인딩되지 않는 반면 두 개의 다른 조건을 가질 수있는 두 개의 동일한 클래스 '배지 경고'가 있습니다. 이것을 수정하려면

 [ngClass] = "{
    'badge-secondary': somevariable === value1,
    'badge-danger': somevariable  === value1,
    'badge-warning': somevariable  === value1 || somevariable  === value1, 
    'badge-success': somevariable  === value1 }" 

  <div *ngFor="let celeb of singers">
  <p [ngClass]="{
    'text-success':celeb.country === 'USA',
    'text-secondary':celeb.country === 'Canada',
    'text-danger':celeb.country === 'Puorto Rico',
    'text-info':celeb.country === 'India'
  }">{{ celeb.artist }} ({{ celeb.country }})
</p>
</div>

당신이 사용할 수있는 <i [className]="'fa fa-' + data?.icon"> </i>