컨텐츠 프로젝션(content projection)

컨텐츠프로젝션은 컴포넌트 밖에서 가져온 HTML컨텐츠를 템플릿안에 표시하는것을 의미한다.

• 컴포넌트 엘리먼트 태그 안에 들어있는 HTML
• 컴포넌트 템플릿에서 < ng-content >가 사용된 부분

<after-content>
  <app-child></app-child>
</after-content>

< app-child >태그와 </ after-content >태그 안에 컴포넌트가 있다.

컴포넌트 안에 프로젝션하는 경우가 아니라면 컴포넌트 엘리먼트 태그 안에는 아무것도 넣어서는 안된다.

프로젝션하는 경우

  <div>projected content begins</div>
    <ng-content></ng-content>
  <div>projected content ends</div>

< ng-content >< /ng-content >의 자리에 < app-child >< /app-child >컴포넌트가 프로젝션된다.

ngAfterContent후킹메소드에서 변화를 감지하고 변화데이터를 LoggerService에 등록하면 상위컴포넌트에서 변화데이터로 뷰를 갱신한다.

프로젝션된 하위컴포넌트의 인스턴스를 얻은려면
@ContentChild(ChildComponent) contentChild!: ChildComponent; 를 사용해야 한다.

컨텐츠가 갱신된 것은 기다릴 필요가 없다.

Angular는 AfterView를 실행하기 전에 AfterContent 후킹함수를 먼저 실행한다.

컨텐츠 프로젝션이 마무리되는 시점은 Angular가 컴포넌트 뷰 화면을 마무리하기 전이다.

AfterContent...와 AfterView... 후킹함수가 실행되는 타이밍 사이에 약간의 틈이 있어 이 시점에 호스트 뷰에서 무언가 변경해도 정상적으로 렌더링 된다.