ng급과 ng급의 차이점은 무엇입니까?

ng급과 ng급의 차이점은 무엇입니까?

ng-class그리고.ng-style둘 다 CSS 클래스를 동적으로 설정하는 방법인 것 같습니다.그들의 차이점은 무엇입니까?

ng-style은 javascript 객체를 CSS 클래스가 아닌 style 속성으로 보간하는 데 사용됩니다.

다음 지침은 style="color:red"로 번역됩니다.

ng-style="{color: 'red'}"

그리고 ng-class 명령어는 개체를 클래스 속성으로 변환합니다.

isDeleted 변수가 true이면 다음이 class="deleted"로 변환됩니다.

ng-class="{'deleted': isDeleted}"

참고:

ng 스타일의 사용 사례가 하나 더 있습니다.스타일 속성에 있는 것을 보간하려면 ng-style을 사용하는 것이 좋습니다.그렇지 않으면 문서에서 알 수 있듯이 Internet Explorer 11 이전에는 작동하지 않습니다.

스타일을 사용하는 대신:

style="width: {{progress}}"

eng 스타일 사용:

ng-style="{'width':progress}"

인ng-class부트스트랩 같은 곳에서 정의된 CSS 클래스를 로드하고 있습니다.ng-style해당 요소가 가질 CSS 스타일을 설정하는 경우는 다음과 같습니다.

ng-style="{ 'background-color': person.email == selectedPerson.email ? 'lightgray' : ' '}" //background-color is a style

has-error는 스타일(들)로 구성된 에 정의된 클래스입니다.

ng-class="{ 'has-error’: !theForm.email.$valid, 'has-success':theForm.email.$valid}

공식 문서: https://angular.io/api/common/NgClass

1. ngClass를 사용하는 여러 가지 방법이 있습니다.

   ...

   <some-element [ngClass]="['first', 'second']">...</some-element>
   
   <some-element [ngClass]="{'first': true, 'second': true, 'third': false}">...</some- 
   

   요소>

   <some-element [ngClass]="stringExp|arrayExp|objExp">...</some-element>
   
   <some-element [ngClass]="{'class1 class2 class3' : true}">...</some-element>
   

2. ngStyle과 마찬가지로 다음을 수행할 수 있습니다.

**< some-element [ngStyle]="{'font-style': styleExp}">...</some-element>**

• styleExp는 설정 중인 속성에 대해 법적 값으로 평가되는 모든 것(예: 위 예제의 글꼴 크기)이 될 수 있습니다.

• 아니면.

  ****< some-element [ngStyle]="objExp">...****

• 여기서 objExp는 스타일 특성(예: { width: 40, margin: '2em' })의 키-값 쌍을 포함하는 개체입니다.

이론적으로는 둘 다 다르지만 실제로는 어느 시점에서 둘 다 같아집니다.

ngStyle은 런타임에 동적으로 스타일을 추가하는 데 사용됩니다.

ngClass는 런타임에 일부 클래스를 동적으로 추가하는 데 사용되지만 class도 일부 css 내용을 보유하고 있으므로 간접적으로 여기에 css를 동적으로 추가하는 것입니다.

언급URL : https://stackoverflow.com/questions/26919963/what-is-the-difference-between-ng-class-and-ng-style