Dynamic(동적) Component 생성

앙귤러!!!

Angular 초심자인 나로서 앵귤러를 활용하면서 두번째로 크게 막혔던 것은 컴포넌트를 실행중에 동적으로 생성하는 것이었다. 

분명 이런 기능은 제공할거라는걸 알긴 하는데 그걸 뭐라고 부르는지 몰라서 고생했다

사용법은 간단한다. 하단 링크에 있는 공식문서를 간단히 따라하면 된다.

---

요는, ComponentFactoryResolver 클래스가 제공하는 resolveComponentFactory 함수를 이용하는 것이다.

addComponent 버튼을 누르면 컴포넌트를 생성하여 추가한다.

상기 이미지의 기능을 담당하는 코드

ComponentFactoryResolver 의 resolveComponentFactory 함수가 컴포넌트를 resolve 하고 createComponent 함수를 이용하여 컴포넌트를 생성한다. 

---

생성까지는 어렵지 않았을거라고 생각한다. 

여기서부터는 굳이 안 봐도 상관은 없지만, 개인적으로 흥미로웠기에 짚고 넘어간다.

Service 를 생성하여서 컴포넌트간 데이터를 공유하는 방법으로도 충분히 구현이 가능했겠지만, 아래와 같은 방식의 사용은 굉장히 흥미로웠다.

ComponentRef 를 잘 보자.

ComponentRef : Component Reference (컴포넌트 참조) 라는 뜻인데... 뭔가 좀 볼 구석이 있다. 

console.log(componentRef.instance) 의 값.

instance 를 통해서 값을 주게 되면, 실제로 해당 컴포넌트(여기서는 ForBlogComponent)에 특정 변수가 존재하지 않아도 변수를 지정해 줄 수 있게 된다. 

예를 들면, 상기 이미지에는 componentRef.instance.var='var-Value'; 라는 코드가 있는데 실제로 ForBlogComponent 에는 var 라는 변수가 존재하지 않지만, 그래도 생성된 컴포넌트에서 var 라는 값을 사용하는 구문이 있다면 아무런 문제 없이 사용이 가능하다!! 물론 tslint에서는 구문 오류라고 잡는다

그 외에도 componentRef.location.nativeElement.classList.add(`className`); 기능을 이용하면 클래스를 추가할 수 있다. 

---

덤. 동적 로딩할 컴포넌트들이 lazyLoading되는 Module에 속해있다면 아래처럼 entryComponent 속성에 지정해주어야 한다. 

xxx.module.ts

---

https://angular.io/guide/dynamic-component-loader

Angular

https://angular.io/guide/dynamic-component-loader#resolving-components

Angular