& 각도 2의 스타일 귀속 스타일

& 각도 2의 스타일 귀속 스타일

2022-06-01 last update

7 minutes reading Angular
Angular 2 템플릿에서는 인라인 스타일을 쉽게 바인딩할 수 있습니다.다음은 단일 스타일 값을 바인딩하는 방법입니다. 예를 들어 다음과 같습니다.
<p [style.background-color]="'darkorchid'">
  Quite something!
</p>
또한 단위를 지정할 수 있습니다. 예를 들어 우리는 em에서 단위를 설정하지만 px,% 또는rem를 사용할 수 있습니다.
<p [style.font-size.em]="'3'">
  A paragraph at 3em!
</p>
다음은 구성 요소의 속성에 따라 스타일 값을 조건부로 설정하는 방법입니다.
<p [style.font-size.px]="isImportant ? '30' : '16'">
  Some text that may be important.
</p>

다중 값 NgStyle


단순 스타일 바인딩은 단일 값에 좋지만 여러 스타일을 적용하는 가장 간단한 방법은 NgStyle을 사용하는 것입니다.
<p [ngStyle]="myStyles">
  You say tomato, I say tomato
</p>
그리고 myStyles는 다음과 같이 css 속성 이름을 키로 하는 객체를 포함하는 구성 요소의 속성입니다.
myStyles = {
'background-color': 'lime',
'font-size': '20px',
'font-weight': 'bold'
}
또한 다음과 같이 인라인 방식으로 제공됩니다.
<p [ngStyle]="{'background-color': 'lime',
    'font-size': '20px',
    'font-weight': 'bold'}">
  You say tomato, I say tomato
</p>
또는 객체가 메서드의 반환값일 수 있습니다.
<p [ngStyle]="setMyStyles()">
  You say tomato, I say tomato
</p>
연관된 어셈블리 클래스에서
setMyStyles() {
  let styles = {
    'background-color': this.user.isExpired ? 'red' : 'transparent',
    'font-weight': this.isImportant ? 'bold' : 'normal'
  };
  return styles;
}

참조

  • Class binding + NgClass