# 개요
circle 형태의 background-url을 가지고 있는 div Component를 반복적으로 사용한다고 하자. 사실 변하는 값은 한 두가지(value url 또는 color, size) 등이고, 나머지 틀은 다 똑같다. 그런데, 사용되는 곳마다, 클래스를 다같이 선언해주어야 하고, 불편하고, 수정이 어려워진다는 단점이 존재한다.
그래서, angular는 재사용가능한 component를 지정하여, 변하는 속성만 Input으로 받고, 나머지는 감추어서 표현이 가능하다.
# 참고
- ngClass 속성은 동적 Class명 리스트를 지정할 수 있다.
(ex) ['기본속성','사용자정의 속성']
- ngStyle 속성은 동적 style을 지정할 수 있다.
- onChanges LifeCycle 함수는 아래와 같은 경우에 호출된다.
1. 자식 컴포넌트가 부모로 부터 전달받은 데이터가 초기화 되는 시점
2. 그 후에 변경될 때마다 호출
3. 즉, Input 데코레이터로 전달 받은 데이터가 변경되지 않으면 호출되지 않는다.
- @Input() 데코레이터의 값은 기본값을 지정할 수 있다.
<ts>
import { Component, OnInit, Input, OnChanges, SimpleChanges } from '@angular/core';
@Component({
selector: 'j-avatar',
templateUrl: './avatar.component.html',
styleUrls: ['./avatar.component.scss']
})
export class AvatarComponent implements OnChanges {
@Input() avatarUrl: string;
@Input() name: string;
@Input() size = 12;
@Input() rounded = true;
@Input() className = '';
style: {};
constructor() {}
// onChange 호출 시, css 스타일 지정
ngOnChanges(changes: SimpleChanges): void {
this.updateStyle();
}
ngOnInit(): void {}
private updateStyle() {
this.style = {
width: `${this.size}px`,
height: `${this.size}px`,
'background-image': `url('${this.avatarUrl}')`,
'border-radius': this.rounded ? '100%' : '3px'
};
}
}
<html>
<div *ngIf="avatarUrl"
[ngClass]="['avatar-container', className]"
[ngStyle]="style">
</div>
<scss>
.avatar-container {
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;
border-radius: 50%; //border 추가
border-width: 1px; //border 추가
}
'[DEV] App Dev ∕ Web Front > Framework ∕ Angular' 카테고리의 다른 글
| 기초 Tip 기록 (0) | 2020.09.21 |
|---|---|
| Service에 대하여 (0) | 2020.09.04 |
| [라이브러리]Gridjs : Typescript 기반 게시판 모듈 (0) | 2020.08.24 |
| [라이브러리]Akita : JS 어플리케이션을 위한 State관리 (0) | 2020.08.20 |
| Angular 핵심 요약(미완) (0) | 2020.08.19 |
최근댓글