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

각도 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수행을.

---

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 }" 

참고 URL : https://stackoverflow.com/questions/37090877/dynamic-classname-inside-ngclass-in-angular-2