사용자 정의 HTML 요소가 포함 된 동적 마크 업 생성하기

Question

생성 될 마크 업이 다른 사용자 정의 구성 요소와 관련된 구성 요소에서 마크 업을 동적으로 생성하려고합니다.

ngOnInit(){ 
    const el: HTMLElement = this.elementRef.nativeElement; 

    let labels = ['one', 'two', 'three']; 
    labels.forEach((label) => { 
     let b = document.createElement('my-subcomponent'); 
     el.appendChild(b); 
    }); 
} 

mySubcomponent.html 템플릿

<my-component></my-component> 

및 myComponent.ts의 :의 라인을 따라 뭔가

<span>test</span>

<my-subcomponent> 요소가 마크 업으로 렌더링 할 아이들하지만, 맨손으로, <span> 템플릿없이. Angular1의 $compile 서비스에 상응하는 서비스가 누락되었거나 잘못된 라이프 사이클 순간에 올바른 코드를 작성하고 있다고 생각합니다. 누군가가 나에게 빛을 비추는 것을 감사 할 것이다.

Answer 1

Angular2는 동적으로 추가 된 HTML에 대해 바인딩이나 일치하는 구성 요소 또는 지시어 선택자를 어떤 방식으로도 처리하지 않습니다. Angular2는 HTML을 정적으로 컴포넌트 템플릿에만 추가로 처리합니다. 링크에 대한 Angular 2 dynamic tabs with user-click chosen components