각도 JS에서 템플릿 요소 재귀 호출

Question

각도가 2 인 상황이 있습니다. 아이를 기준으로 ngFor를 반복해야하는 경우가 있습니다. 내 구성 요소는 주어진 입력을 기반으로 목록을 렌더링 할 수 있어야합니다. 그래서 여기

[ 
{ 
    name: 'ABCD', 
    child:[ 
    name: 'A1', 
    child:[ 
     name: 'A1.1', 
     child:[....] 
    ] 
    ] 
} 
] 

지금 내가 DOM을 조작하고 작동에 의해 ngOnInit 구성 요소의 수명주기를 사용하여 내 템플릿 내부의이 구조를 렌더링 시도 데이터 구조입니다.

각도 2에서 DOM을 조작하지 않고 다른 방법이 있습니까? ngFor 내부 템플릿이나 다른 것을 사용할 수 있습니다. 나는 많은 일을했지만 운이 없었습니다.

UPDATE : 시도 DOM 조작

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

@Component({ 
    selector: 'multiple-drop-down', 
    template: ` 
    <div class="dropdown"> 
    <button id="dLabel" type="button" class="btn btn-primary" 
    data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
       {{selected.size}} item selected<span class="caret"></span> 
    </button> 
    <ul class="dropdown-menu treeview" aria-labelledby="dropdownMenu"> 
     <li id="item-lists"> 
      <a href="javascript:void(0);" (click)="toggleItemSelect($event)"> 
       <input (change)="selectAll($event)" type="checkbox" id="checkbox-select-all"> 
       <label for="tall" class="custom-unchecked">Select All</label> 
      </a> 
     </li> 
    </ul> 
    </div> 
    `, 
}) 
export class MultipleDropDownComponent implements OnInit { 
menuItemList: Array<MenuObject>; 
selected: Set<string>; 

constructor() { 
    this.selected = new Set<string>(); 
    this.menuItemList = [ 
    { name: 'item 1', id: 'A', child: [ 
     { name: 'item 1.1', id: 'A1', child: [ 
      { name: 'item 1.11', id: 'Aa1', child: []}, 
      { name: 'item 1.12', id: 'Aa2', child: []}, 
      { name: 'item 1.13', id: 'Aa3', child: []} 
     ]}, 
     { name: 'item 1.2', id: 'A2', child: []}]}, 
    { name: 'item 2', id: 'B', child: []}, 
    { name: 'item 3', id: 'C', child: []}, 
    { name: 'item 4', id: 'D', child: []}]; 
    } 

    ngOnInit() { 

    // calling render method to populate dropdown values 
    this.renderChildElements('item-lists', this.menuItemList , 'first'); 
    } 

    renderChildElements(id: string, items: MenuObject[], key: string): void { 
    let parent = this.createULElement(id, key); 
    items.forEach((element: MenuObject) => { 
     let Li = document.createElement('li'); 
     Li.setAttribute('id', element.id); 
     Li.innerHTML = `<a href="javscript:void(0);" 
         (click)="toggleItemSelect($event)"> 
         <input type="checkbox" name="` + element.name + `" 
         id="` + element.id + `" (click)="toggleMultiSelect($event, ` + element + `)"> 
         <label for="tall-1" class="custom-unchecked">` + element.name + `</label> 
         </a>`; 
     document.querySelector('#' + parent).appendChild(Li); 

     // this condition is responsible for recurrsion process 
     if (element.child.length > 0) { 
      this.renderChildElements(element.id, element.child, element.id); 
     } 
    }); 
    } 

createULElement(parentId: string, childId: string): string { 
    let ulId = childId + 'ul'; 
    let newUl = document.createElement('ul'); 
    newUl.setAttribute('id', ulId); 
    document.querySelector('#' + parentId).appendChild(newUl); 
    return ulId; 
    } 
} 

export interface MenuObject { 
    id: string; 
    name: string; 
    child?: MenuObject[]; 
} 

Answer 1

이 당신이 원하는 것을 수행해야합니다

@Component({ 
    selector: 'child', 
    template: ` 
<div>{{data?.name}}</div> 
<child [data]="data?.child]></child>` 
}) 
class ChildComponent { 
    @Input() data; 
} 

@Component({ 
    selector: 'my-app', 
    template: ` 
<child [data]="data?.child]></child>` 
}) 
class ChildComponent { 
data = [ 
{ 
    name: 'ABCD', 
    child:[{ 
    name: 'A1', 
    child:[{ 
     name: 'A1.1', 
     child:[....] 
    }] 
    }] 
} 
]; 
}