컴포넌트는 기본적으로 재사용하려는 목적을 가지고 있다.
컴포넌트 자체로 뷰를 완성할 수 도 있지만 뷰 일부를 외부에 위임해서 프로젝션하려는 목적으로 사용할 수 있다.
<app-zippy>
<button appExampleZippyToggle>click</button>
<ng-template appExampleZippyContent>
this is complex projection example
</ng-template>
</app-zippy>프로젝션 템플릿에 템플릿변수, 바인딩... 태그문법을 사용하면 문법구현을 삽입되는 컴포넌트가 아닌 해당 컴포넌트에서 구현해야 한다.
이방식은 프로젝션되는 하위 템플릿 일부를 상위컴포넌트에서 제어하고 일부는 하위템플릿에서 제어하기 때문에 좋은 방법이라고 할 수 없다.
상위컴포넌트에서는 하위컴포넌트 일부를 프로젝션만 할 뿐 제어는 하지 않는 것이 좋다.
그렇다면 프로젝션된 요소노드를 하위 컴포넌트에서 제어할 방법이 있어야 한다.
디렉티브를 사용하여 하위컴포넌트와 같은 파일에서 구현하고 디렉티브에 컴포넌트를 의존성주입도 가능하다.
컴포넌트에서는 @ContentChild로 디렉티브의 인스턴스를 참조할 수 있다.
ng-template를 프로젝션하면 하위컴포넌트에서 @ContentChild로 인스턴스를 얻어서 제어하면 된다.
