각도 2 : innerHTML의 동적 구성 요소로드 중

Question

2 개의 구성 요소가 있습니다. 이제 예를 들어 innerHTML과 같이 동적으로로드해야합니다.

import { 
    Component, 
    OnInit, 
    ViewEncapsulation 
} from '@angular/core'; 


@Component({ 
    selector: 'component-1', 

    templateUrl: './component-1.html', 

    encapsulation: ViewEncapsulation.None 
}) 
export class Component1 implements OnInit {  

    public ngOnInit() { 
    this.domEl = '<component-2 data="1234"></component-2>' 
    } 
} 

컴포넌트 -2- 이미 [] 선언 app.module.ts 통해 파일에 삽입되는 Angular2 컴포넌트 클래스 1 성분 1.html

<div [innerHTML]="domEl | safeHtml"></div> 

아래와 같이. 또한 safeHtml은 안전한 HTML 변환에 사용되는 파이프입니다.

심지어 문제는 구성 요소 2가로드되지 않습니다. 아무도 내가 이것을 고칠 수있는 방법을 제안 할 수 있습니까?

참고 :

• 내가 구성 요소 1.html에서 구성 요소-2 포함 할 경우
  직접 작동합니다. 그러나 컴포넌트 -2를 동적으로 삽입 할 수없는 경우가 있습니다.
• 스택은 Angular2, TypeScript 및 Webpack에서 빌드됩니다.

Answer 1

Angular는 보안 목적으로 위생 처리를 제외한 [innerHTML]="..."에 전달 된 HTML을 처리하지 않습니다. 앞서 언급했듯이 Angular는 내용을 무시하기 때문에 바인딩, 구성 요소, 지시문 ...은 생성되지 않습니다. 당신이 할 수있는 일은 런타임시에 Equivalent of $compile in Angular 2에서 설명한 것처럼 컴포넌트를 생성하는 것입니다. AFAIR 누군가 쉽게 모듈을 만들었지 만 세부 사항은 기억이 안납니다.