Angular 강좌(12) - 데이터공유(Content Projection)
Angular 강좌는 여러 절로 구성되어 있습니다.
- Angular 강좌(1) - Introduction
- Angular 강좌(2) - 개발환경세팅
- Angular 강좌(3) - Component
- Angular 강좌(4) - Angular Material
- Angular 강좌(5) - 실습(1)
- Angular 강좌(6) - Data Binding
- Angular 강좌(7) - 실습(2)
- Angular 강좌(8) - Material Table
- Angular 강좌(9) - 데이터공유(@Input)
- Angular 강좌(10) - 데이터공유(@Output)
- Angular 강좌(11) - 데이터공유(@ViewChild)
- Angular 강좌(12) - 데이터공유(Content Projection)
- Angular 강좌(13) - Service
- Angular 강좌(14) - Service Mediator Pattern
- Angular 강좌(15) - Service RxJS
- Angular 강좌(16) - Material Table Event
- Angular 강좌(17) - 중간 정리
- Angular 강좌(18) - Directive
- Angular 강좌(19) - Pipe
- Angular 강좌(20) - Component Lifecycle
Content Projection
이번 포스트는 과거 AngularJS에서 transclusion
이라고 불리었던 Content Projection
에 대해서 알아보겠습니다. 쉽게 말하자면
부모 Component가 자식 Component에게 template을 전달해 줄 수 있는 기능입니다. 이 역시 우리 예제에서는 필요없는
부분이지만 간단하게 내용을 추가해서 알아보겠습니다.
다음은 book-search-main.component.html
의 내용입니다.
<div class="bookSearch-outer">
<div class="d-flex align-items-center p-3 my-3 text-white-50 bg-purple rounded box-shadow">
<img class="mr-3" src="assets/images/search-icon.png" alt="" width="48" height="48">
<div class="lh-100">
<h5 #resultStatus class="mb-0 text-white lh-100">Search Result : {{searchTitle}}</h5>
</div>
</div>
<div class="example-container">
<mat-form-field>
<mat-select placeholder="도서종류"
#bookCategorySelect
[(ngModel)]="selectedValue"
(ngModelChange)="changeValue(bookCategorySelect.value)">
<mat-option *ngFor="let category of bookCaterory"
[value]="category.value">
{{ category.viewValue }}
</mat-option>
</mat-select>
</mat-form-field>
<button mat-raised-button color="primary"
(click)="clearCondition()">검색 초기화</button>
<button mat-raised-button color="primary"
(click)="changeDOM()">DOM 직접 변경</button>
</div>
<div>
<app-search-box [bookCategory]="displayCategoryName"
(searchEvent)="changeTitleBar($event)">
<p>Content Projection!</p>
<p>First Paragraph</p>
<p>Second Paragraph</p>
</app-search-box>
</div>
<div>
<app-detail-box></app-detail-box>
</div>
<div>
<app-list-box></app-list-box>
</div>
</div>
기존에 비해 변경된 부분만 보시면 됩니다. 위의 코드 중
<app-search-box [bookCategory]="displayCategoryName"
(searchEvent)="changeTitleBar($event)">
<p>Content Projection!</p>
<p>First Paragraph</p>
<p>Second Paragraph</p>
</app-search-box>
부분을 보면 하위 Component를 포함시키면서 3개의 <p>
Element를 전달한 것을 보실 수 있습니다. 이렇게 부모 Component가
자식 Component에게 특정 template을 전달해 줄 수 있는 기능이라고 생각하시면 됩니다. 자식 Component인
search-box.component.html
은 다음과 같이 작성합니다.
<div class="example-container">
<mat-toolbar #toolbar class="search-toolbar-style">
Search Keyword : {{keyword}}
<ng-container *ngIf="_bookCategory != null">
( {{_bookCategory}} )
</ng-container>
</mat-toolbar>
<mat-form-field>
<input matInput #inputKeyword placeholder="Search Keyword"
[(ngModel)]="keyword" (ngModelChange)="inputChange()">
</mat-form-field>
<button mat-raised-button color="warn"
(click)="setKeyword(inputKeyword.value)">Search!</button>
<ng-content></ng-content>
</div>
다른 부분은 다 동일하고 맨 마지막에 <ng-content></ng-content>
directive가 보입니다. 이 directive가 부모 Component가
전달해 준 template으로 치환되게 됩니다.
다음에는 Service에 대해서 알아본 후 이를 이용한 데이터 공유 방법인 Service Mediator Pattern에 대해서 알아보도록 하겠습니다.
End.
Angular 강좌는 아래의 책과 사이트를 참조했습니다. 조금 더 자세한 사항을 알고 싶으시면 해당 사이트를 방문하세요!!
- Angular Official HomePage
- Angular Material Official HomePage
- Build a Mobile App with Angular 2 and Ionic 2
- Angular 첫걸음 - 한빛미디어
- 제대로 배우는 Angular 4 - 비제이퍼블릭