컨텐츠 투사, content projection

Content projection (컨텐츠 투사)

"Content projection is a way to import HTML content from outside the component and insert that content into the component's template in a designated spot."

 

 

명함을 예로들어보자. 모든 정보를 담고있는 명함 종이를 Parent 컴포넌트라고 하자. 그리고 인적사항(이름/직함/이메일/주소/전화번호)이 적힌 부분은 Child 컴포넌트이다.

이름, 직함, 이메일, 주소, 전화번호는 각각 External Contents들이며 컴포넌트일 수도 있다. 

이름 컴포넌트는 "김찬기", 직함 컴포넌트는 "사원", 이메일 컴포넌트는 "chanki@naver.com"라는 컨텐츠를 가지고 있고, 명함(parent) 컴포넌트에서는 이름, 직함, 이메일 컴포넌트를 감싸고 있는 인적사항(child) 컴포넌트를 통해 컴포넌트들의 real contents를 투사해서 볼 수 있게된 것이다.

 

<!-- Parent component -->
<after-content>
  <app-child></app-child>
</after-content>

<!-- Child component -->
<div>projected content begins</div>
  <ng-content></ng-content>
<div>projected content ends</div>

<!-- app-child component -->
<h1>HI</h1>

<!-- view result -->
<div>projected content begins</div>
  <h1>HI</h1>
<div>projected content ends</div>

 

content는 HTML 태그로 감싸진 정보(이름/직함/이메일...)를 담고 있다. 그리고 이정보를 컴포넌트 템플릿 안에, 템플릿으로 감싸주면 된다. (참고)

 

" Never put content between a component's element tags unless you intend to project that content into the component."

Angular의 공식문서에 따르면, content projection을 의도한 것이 아니라면 절대 컨텐츠를 컴포넌트 태그 사이에 넣지 말라고 한다.