컴포넌트 동적로딩

컴포넌트 템플릿은 어플리케이션 실행전에 로드되는데 샐행중에 컴포넌트를 불러올 수 있다.

      AD Service ~
      <p></p>
      <ng-template tplRef></ng-template>

동적로딩 컴포넌트가 자리에 ng-template엘리먼트를 만들며 이것은 나중에 인스턴스로 접근해서 컴포넌트를 불러와 넣을 것이다.

엘리먼트에 디렉티브를 넣어 인스턴스로 접근할 수 있도록 한다.

import { Directive, ViewContainerRef } from '@angular/core';

@Directive({
   selector:'[tplRef]'
})
export class TplRefDirective{
   constructor(public viewContainerRef:ViewContainerRef){}
}

디렉티브는 viewContainerRef프로퍼티만 가지며 viewContainerRef.createComponent함수로 동적으로 컴포넌트를 불러온다.