각도 5로 동적으로 기존 구성 요소 컴파일 및 렌더링

Question

동적 레이아웃과 함께 작동하는 각도 1.x 앱이 있습니다. 앱은 화면의 메타 데이터가있는 레이아웃 json을 받고 간단히 컴파일 된 구성 요소를 생성하고 화면을 만듭니다.

관련 "중요한 코드는"다음과 같습니다

const element = this.$compile(`<${this.control.type} control="control" data="data"></${this.control.type}>`)(scope); 
this.$element.replaceWith(element); 

을 지금, 나는 5 각도에이를 마이그레이션하기 위해 노력하고있어 나는 5 각도는 DOM 조작을 떨어 있음을 이해 한하고 $이 기능을 컴파일 .

저는 동적 HTML (예 : {{1 + 1}})과 다른 비추천 물체 (각도 5 이전)를 렌더링하는 방법을 알고 있지만 렌더링에 적합하지 않은 솔루션을 찾았습니다 동적으로 만들어진 구성 요소 (및 내부 바인딩 처리).

나는이 AngularJS와 같은 자기에 의해 구성 요소를 만들 수있는 방법입니다 기능

Answer 1

이런 종류의 작업을 수행 할 수있는 방법이 있습니까 : (그것을 파괴하는 것을 잊지 마세요에 componentRef에) (파괴 불러!)이 작업을 수행

부모 요소 :

@ViewChild('componentHolder', { read: ViewContainerRef }) componentHolder: ViewContainerRef; 

constructor(private componentFactoryResolver: ComponentFactoryResolver) { } 
public createComponent(): void { 
      const componentFactory = this.componentFactoryResolver.resolveComponentFactory(MyComponent); 
      const componentRef = this.componentHolder.createComponent(componentFactory); 
} 

부모 구성 요소 HTML :

<button (click)="createComponent()">Add New MyComponent below</button> 
<div #componentHolder ></div> 

NgModule의를 MyComponent 추가 : 당신이 달성하려고하는 것은 여전히 ​​각도에서 가능하다

... 
    imports: [ 
    BrowserModule, 
    FormsModule, 
    RouterModule.forRoot(appRoutes), 
    ], 
    entryComponents: [ 
    MyComponent 
    ],...