안쪽 부분 2 렌더링 구성 요소가 ng 용

Question

그래서 내 구성 요소 중 하나에 탭이 있습니다. 각각의 탭, 즉 TabOneComponent ... TabTenComponent에 자신의 구성 요소를 넣습니다. 그런 다음이를 표시 나는이처럼 그들을 렌더링 컴포넌트 내부 배열에 넣어하기로 결정합니다 :

<div class='tab-content'> 
    <div *ngFor="let t of tabs" class='tab-pane {{ t.class }}' id='{{ t.id }}' [innerHTML]="t.template | htmlSanitizer"> 
    </div> 
<div> 

참고 :

tabs: Array<any> = [ 
    {label: 'Tab One', id: 'tabone', class: 'active', template: '<tab-one></tab-one>'} 
    ... 
    {label: 'Tab Ten', id: 'tabten', template: '<tab-ten></tab-ten>'} 
] 

그런 다음 나는이 같은 ngFor을 만들었을 표시하기 : htmlSanitizer는 내가 만든 파이프이며 작동합니다.

여기서 문제는 각 구성 요소의 템플릿이 렌더링되지 않는다는 것입니다. 그래서 그것을 할 수 있습니다 또는 정말 개별적으로 넣어해야합니까 :

<div class="tab-pane active" id="tabone"> 
    <tab-one></tab-one> 
</div> 
... 
<div class="tab-pane" id="tabten"> 
    <tab-ten></tab-ten> 
</div> 

미리 감사드립니다!

내가 요소 탭에서 크롬에서 검사 편집, 나는 <tab-ten></tab-ten>-<tab-one></tab-one>은 그냥 실제 구성 요소 템플릿을 렌더링하지 않는 사실이 있음을 참조하십시오.

Answer 1

이것이 작동하는지 확인하십시오.

<div class="tab-content"> 

    <div *ngFor="let t of tabs"> 
     <div [attr.class] = "t.class tab-pane" 
      [attr.id] = "t.id" 
      [innerHTML] = "t.template | htmlSanitizer"> 
     </div> 
    </div> 

</div>