파이프란?
앵귤라에서 템플릿 뷰에 보여지는 데이터를 formatting 및 가공 할수 있도록 지원해준다. 사용방법은 표현식, 즉 중첩 중괄호{{}}로 묶어서 vertical bar 구분하여 해당 pipe 명을 호출해주면 된다.
{{ expression | pipe }}
내장파이프
이미 앵귤라 공홈에서 달러, 날짜, 가격 3자리수마다 콤마를 찍어주기 등 많이 사용되는 formatting을 지원해주고 있다.
CSS 나머지 글자수 처리(...)
이 글을 쓰는 목적이기도한데, 기본적으로 css에서 단일 문장으로 이루어지는 경우
해당 container에서 다음과 같은 속성을 설정하여 간단한게 (...)처리할 수 있다.
하지만 width라는 고정 폭(width)가 설정되어있어야 한다는 한계점이 있다.
width:70px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
하지만 글자수 15자리부터라는 제한이나 다중 멀티라인인 경우 어떻게 될까?
다중 멀티라인의 경우 webkit에서 제공하는 속성을 이용하여 clamp와 line-height로 CSS 처리가 가능하다.
하지만 2줄 이상부터는 ...으로 표시하는 부분이지만 width가 커져서 줄바꿈이 적용되지 않는경우에는 모두 글자가 출력된다는 것과 line-height를 조정해야한다는 한계점이 있어 디자이너가 전달해준 가이드에 어긋날 수 있다.
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-height: 20px;
margin-bottom: 11px;
앵귤라에서 제공하는 내장파이프
서론에서 안내한것과 같이 javscript slice()처러 start end 인자를 넘겨 출력가능하다.
{{ ("happy-sonday tisotry blog" | slice: 0:12) + "..." }} <-- happ-sonday -->
하지만 html에서 view기능만 제공한다 가정했을 때, +연산자를 통해 연산을 필요로하고 가독성도 떨어진다는 점이 있다. 그래서 사용자 정의를 통해 글자수 제한과 동시에 동적으로 표현하고자하는 특수문자표시도 설정할 수 있는 사용자 정의 파이프를 만들고 싶었다.
터미널에 ng generate pipe <pipe명> 해당 이름을 가진 pipe가 생성된다.
경로를 지정하지 않는 경우, src/app에 생성된다.
@Pipe 데코레이터에 interpolation에 호출된 name으로 transform에 정의된 연산을 수행하여 데이터 가공된 결과를 출력하게 된다.
export class LengthPipePipe implements PipeTransform {
outStr: string;
transform(input: string, replacement: string) {
if (input.length > 12) {
this.outStr = input.substring(0, 11);
return this.outStr + replacement;
}
}
}
표현식( {{ }} )의 데이터를 input이라는 인자로 가져오고 replacement에는 나머지 기호를 표현하고자하는 특수문자를 설정하여 연산된 outStr과 replacement를 + (할당 연산자)로 문자열 병합하여 retrun한다.
결과
게시판 제목이나 상품명 표시 퍼블리싱 중, 멀티라인의 글자수 제한문제를 해결하고자 했으며 CSS의 trick을 과도하게 사용하는 경우 사용자가 UI 핸들링이나 해상도에 따른 컨테이너 크기변화에 적절하게 대응하지 못 할 수 있어 사용을 자제했다.
댓글