06 동적 컴포넌트(Dynamic Component) 01

동적 컴포넌트

동적 컴포넌트 로더

컴포넌트 템플릿이 항상 고정되어 있는 것은 아닙니다. 응용프로그램은 런타임시에 새 컴포넌트를 로드해야 하는 경우가 있습니다.

이 책은 ComponentFactoryResolver를 사용하여 컴포넌트를 동적으로 추가하는 방법을 보여줍니다.

이 책에 실린 예제 / 다운로드 예제를 보세요.

 

동적 컴포넌트 로딩

다음 예는 동적 광고 배너를 작성하는 방법을 보여줍니다.

주인공은 배너를 통해 순환하는 여러 가지 광고로 광고 캠페인을 계획하고 있습니다. 여러 팀에서는 자주 새로운 광고 컴포넌트를 추가합니다. 따라서 정적 컴포넌트 구조가 있는 템플릿을 사용하는 것은 비현실적입니다.

대신 광고 배너 템플릿의 컴포넌트에 고정 된 참조없이 새 컴포넌트를 로드하는 방법이 필요합니다.

Angular는 컴포넌트를 동적으로 로드하기 위해 자체 API를 제공합니다.

 

앵커 디렉티브

컴포넌트를 추가하기 전에 고정 점을 정의하여 Angular에 컴포넌트를 삽입할 위치를 지정해야합니다.

광고 배너는 AdDirective라는 헬퍼 디렉티브를 사용하여 템플릿의 유효한 삽입 지점을 표시합니다.

src/app/ad.directive.ts

import { Directive, ViewContainerRef } from '@angular/core';   @Directive({   selector: '[ad-host]', }) export class AdDirective {   constructor(public viewContainerRef: ViewContainerRef) { } }

AdDirective는 ViewContainerRef를 주입하여 동적으로 추가 된 컴포넌트를 호스팅 할 엘리먼트의 뷰 컨테이너에 액세스합니다.

@Directive 데코레이터에서는 selector 이름 ad-host를 확인합니다. 이것은 엘리먼트에 디렉티브를 적용 할 때 사용합니다. 다음 섹션에서 방법을 보여줍니다.