CreatComponent

* 영어표기가 디폴트, 이하 한글표기

* Angular 기준

---

설명에 앞서, 이것이 무엇인가 ~ 동적인 페이지를 만들기 위해 사용되는데.

Router 는 약간 큰 개념 - CreatComponent 는 좀 더 가벼운 개념

예를들면 라우터는 고유의 페이지 링크가 있고, 불러올때 깜빡거림

그런데 CreatComponent 는 컴포넌트 개념인데. 하나의 View 가 있으면 그 안에 채워지는 퍼즐 조각 느낌

 

라우터 (3개의 페이지)

컴포넌트 (다람쥐)

 

컴포넌트 (개미)

 

컴포넌트 (매미)

 

CreatComponent (1개의 페이지)

컴포넌트 (다람쥐)	컴포넌트 (개미)	컴포넌트 (원숭이
			컴포넌트 (매미)

 

둘 다 장단점이 있다. 용도에 맞게 사용할것.

 

---

사용방법 (Angular 13 버전 기준)

1. HTML 페이지에, 원하는 부분에 ng-container 제작, # 사과 는 HTML 과 Ts 코드를 엮어주는 용도
<ng-container #사과></ng-container>

 

2. export class 아래에, @ViewChild 로 View(HTML) 단이랑 엮어준다. 바나나는 사용될 이름
@ViewChild(' 사과 ', { read: ViewContainerRef }) 바나나?: ViewContainerRef;

3. 컴포넌트 모듈, 고구마는 (새롭게) 사용할 이름 정의, 딸기는 사용될 컴포넌트의 이름
고구마Component?: ComponentRef<딸기Component>

4. 사용할 컴포넌트를 지정한 이름과 엮어서 작성.
this.고구마Component = this.바나나!.createComponent<딸기Component>(딸기Component);

 

5. 사용된 컴포넌트(고구마) 안의 함수(딸기 씨앗)를 자유롭게 사용할 수 있다.

this.고구마Component.instance.딸기 씨앗();

 

---

대략 이런구조

import { 딸기Component } from '주소.component';

      ...
     export class MainComponent {
          @ViewChild(' 사과 ', { read: ViewContainerRef }) 바나나?: ViewContainerRef;

          고구마Component?: ComponentRef<딸기Component>

          사용할 함수() {
                    this.고구마Component = this.바나나!.createComponent<딸기Component>(딸기Component);
                    this.고구마Component.instance.고구마();
          }
}

---