Angular Content Projection 데이터공유

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에 대해서 알아보도록 하겠습니다.