[ngClass]와 [class] 바인딩의 차이

[ngClass]와 [class] 바인딩의 차이

다음 스니펫 사이의 Angular 2의 차이점은 무엇입니까?

<div [class.extra-sparkle]="isDelightful">
<div [ngClass]="{'extra-sparkle': isDelightful}">

특수 각도 바인딩 구문입니다.

<div [class.extra-sparkle]="isDelightful">

이것은 Angular 컴파일러의 일부이므로 이 바인딩 스타일을 따르는 사용자 지정 바인딩 변형을 만들 수 없습니다.지원되는 것은 다음과 같습니다.[class.xxx]="...",[style.xxx]="...",그리고.[attr.xxx]="..."

ngClass당신이 직접 만들 수 있는 것처럼 일반적인 각도 지시입니다.

<div [ngClass]="{'extra-sparkle': isDelightful}">

ngClass더 강력합니다.클래스 문자열, 문자열 배열 또는 예제와 같은 개체를 바인딩할 수 있습니다.

위의 두 줄의 코드는 Angular에서 바인딩과 관련이class 있습니다.기본적으로 CSS 클래스를 각 구성 요소에 바인딩할 수 있는 방법은 2-3가지가 있습니다.

템플릿에서 대괄호 사이에 클래스 이름을 입력한 다음 true 또는 false로 평가하여 클래스를 적용할지 여부를 결정할 오른쪽의 식을 입력합니다.그것은 엑스트라-스파클(키)이 css 클래스이고,isDelightful(value).

<div [class.extra-sparkle]="isDelightful">

여러 클래스가 잠재적으로 추가되어야 할 경우 NgClass 지시사항은 매우 유용합니다.NgClass클래스 이름이 true 또는 false로 평가되는 키 및 식을 가진 개체를 수신해야 합니다.엑스트라-레플이 핵심이고isDelightful값입니다(boolean).

<div [ngClass]="{'extra-sparkle': isDelightful}">

이제 여분의 반짝임과 함께, 당신은 당신의 것을 반짝일 수 있습니다.div또한.

<div [ngClass]="{'extra-sparkle': isDelightful,'extra-glitter':isGlitter}">

또는

export class AppComponent {
    isDelightful: boolean = true;
    isGlitter:  boolean = true;
    
    get sparkleGlitter()
    {
        let classes = {
            extra-sparkle: this.isDelightful,
            extra-glitter: this.isGlitter
        };
        return classes;
    }
}

<div [ngClass]='sparkleGlitter'>

위해서ngClass조건부 삼원 연산자도 있을 수 있습니다.

Angular의 현재 버전에서는 다음 구문도 잘 작동합니다.

[class]="{toggled: sidebarActive, test: true,test1: sidebarActive}

그래서 제가 알기로는 사용하는 것과 차이가 없습니다.ngClass그리고.[class]구속력이 있습니까?

예

사용.[ngClass]당신은 정말 편리한 방법으로 여러 수업을 신청할 수 있습니다.클래스 개체를 반환하는 함수도 적용할 수 있습니다.[class.클래스를 하나만 적용할 수 있습니다(물론 클래스를 몇 번 사용할 수 있지만 매우 나빠 보입니다).

인[ngClass]다음과 같은 두 가지 클래스 중 하나를 추가할 수 있습니다.

<div [ngClass]="a === b ? 'class1' : 'class2'">

여러 답변을 거친 후에, 이것이 도움이 될 수도 있기 때문에 저는 제 견해를 추가하려고 생각했습니다.

따라서 Angular는 향후 릴리스에서 [ngClass] 및 [ngStyle] 디렉티브를 제거할 계획입니다.

현재(Angular-v13), [class] 바인딩은 여러 CSS 클래스를 추가할 수 있도록 지원합니다.[ngClass]와 비교했을 때 약간의 기능 차이가 있습니다.확인할 수 있습니다 - https://github.com/angular/angular/issues/40623

[ngClass]

<p [ngClass] = “‘addGreen’”> Hello World </p> 
<p [ngClass] = “[‘addGreen’, ‘addFont’, ‘addBg’]”> Hello World </p>
<p [ngClass] = “{ addGreen: true, addBg: true, addFont: false }”> Hello World </p> 
<p [ngClass] = “{ addGreen addBg: true, addFont: false}”> Hello World </p>

[급]

<p [class] = “‘addGreen’”> Hello World </p> 
<p [class] = “[‘addGreen’, ‘addFont’, ‘addBg’]”> Hello World </p>
<p [class] = “{ addGreen: true, addBg: true, addFont: false }”> Hello World </p> 

참고: 아래의 다중 클래스 추가 방법은 사용할 수 없습니다.

<p [class] = "{ addGreen addBg: true, addFont: false}""> Hello World

예, 클래스 바인딩([class])의 도움을 받아 최신 버전의 여러 CSS 클래스를 첨부할 수도 있습니다.ex:[class]='{키가 클래스 이름이고 값이 true/false}인 개체'는 [ngClass]와 같습니다.[class] 바인딩과 내장 [ngClass] 지침 사이에는 차이가 없습니다.

두 가지를 모두 사용하면 아무도 언급하지 않았습니다.[class]그리고.[ngClass]을 바딩에일클문자열전을하달고려하면일있다수습니발혼으로 전달하려고 약간의 할 수 .[class]그은에등 '록됩해의 '니것다 '에 의해 '.[ngClass]그들은 경쟁할 수 있습니다.

를 들어, '은 'd-flex' 클래스 값을 'd-flex' 클래스 값으로 .[class] 력이있 는속아만큼 긴 [ngClass]true로 되었습니다.

구성요소.구성요소

<div [ngClass]="{'d-flex': falseCondition}" [class]="getClassBasedOnCondition()">

구성 요소.ts

public getClassBasedOnCondition(): string {
    return trueCondition ? 'd-flex' : '';
}

사용할 수 있습니다.[class.]에 [ngClass]다음과 같은 여러 클래스 이름이 없는 한 이러한 동작을 방지합니다.[ngClass]="{'d-flex p-1': condition}"

언급URL : https://stackoverflow.com/questions/45321526/difference-between-ngclass-vs-class-binding