재귀 배열로 재귀 적 로딩

Question

재귀 배열 (plunk : http://plnkr.co/edit/3npsad?p=preview)을 사용하여 Angular 2 컴포넌트를 재귀 적으로로드하려고합니다.

[ 
    { 
    "id": 1, 
    "text": "abc" 
    }, 
    { 
    "id": 2, 
    "text": "def", 
    items: [ 
     { 
     "id": 21, 
     "text": "def-1", 
     items: [ 
      { 
      "id": 211, 
      "text": "def-1-1" 
      }, 
      { 
      "id": 212, 
      "text": "def-1-2" 
      } 
     ] 
     }, 
     { 
     "id": 22, 
     "text": "def-2" 
     } 
    ] 
    } 
] 

나는 다음과 같은 출력이 필요합니다 :

<my-item> 
    <div id="1" text="abc"></div> 
</my-item> 
<my-item> 
    <div id="2" text="def"></div> 
    <my-item> 
     <div id="21" text="def-1"></div> 
     <my-item> 
      <div id="211" text="def-1-1"></div> 
     </my-item> 
     <my-item> 
      <div id="212" text="def-1-2"></div> 
     </my-item> 
    </my-item> 
    <my-item> 
     <div id="22" text="def-2"></div> 
    </my-item> 
</my-item> 

난 단지 내 쿵하는 소리의 쇼로 입력의 첫 번째 수준 렌더링 수를

이 재귀 배열을 감안할 때. 원하는 출력을 렌더링하기 위해 구성 요소를 반복적으로 반복 수행하려면 어떻게해야합니까? 입력 배열은 임의의 수의 요소와 중첩을 포함 할 수 있습니다.

감사합니다.

Answer 1

갱신

@NgModule이 도입되고 directives에서 @NgModuleforwardRef으로 마이그레이션하는 것이 더 이상 필요하지 않습니다. 가 선언되기 전에 클래스 ItemComponent이 참조되기 때문에 원래

<my-item *ngFor="let itm of items" [id]="itm.id" [text]="itm.text" [items]="itm.items" > 
</my-item> 

@Component({ 
    selector: 'my-item', 
    styles: ['div {padding-left: 32px;}'] 
    providers: [], 
    template: `<div>{{id}} - {{text}} 
    <my-item *ngFor="let itm of items" [id]="itm.id" [text]="itm.text" [items]="itm.items" > 
    </my-item> 
    </div> 

    `, 
    directives: [forwardRef(()=> ItemComponent)] 
}) 
export class ItemComponent { 
    @Input() id: string; 
    @Input() text: string; 
    @Input() items: any[]; 
    constructor() { 
    } 
} 

forwardRef

가 필요합니다.

Plunker example

Answer 2

시작하기에 뭔가가 있습니다. 나는 당신의 구성 요소를 이런 식으로 만들 것

var a = [ 
    { 
    "id": 1, 
    "text": "abc" 
    }, 
    { 
    "id": 2, 
    "text": "def", 
    items: [ 
     { 
     "id": 21, 
     "text": "def-1", 
     items: [ 
      { 
      "id": 211, 
      "text": "def-1-1" 
      }, 
      { 
      "id": 212, 
      "text": "def-1-2" 
      } 
     ] 
     }, 
     { 
     "id": 22, 
     "text": "def-2" 
     } 
    ] 
    } 
]; 

function iterateRecursive(array) { 
    for(var i = 0; i < array.length; i++) { 
    if(array[i].items) { 
     console.log(array[i].text); 
     //uncomment: printHtml(array[i].id, array[i].text); 
     iterateRecursive(array[i].items) 
    } else {  
     console.log(array[i].text);   
    } 

    } 
} 


iterateRecursive(a); 

//implement this function that takes an id and text and returns html 
//call it in place of console log 
function printHtml(id, text) { 

} 

Answer 3

:

@Component({ 
    selector: 'my-item', 
    template: ` 
    <div id="data.id" text="data.def"></div> 
    <my-item *ngFor="let item of items" [data]="item"></my-item> 
    ` 
}) 
export class MyItemComponent { 
    @Input() data: any; 
} 

및 다른 구성 요소에서 구성 요소를 호출하고 전체 구성 요소 데이터 제공 :

을 당신은 HTML 반환 함수를 직접 구현해야

@Component({ 
    selector: 'other-comp', 
    template: ` 
    <my-item [data]="data" *ngFor="let data of wholeData"></my-item> 
    ` 
}) 
export class OtherComponent { 
    wholeData = [ 
    { 
     "id": 1, 
     "text": "abc" 
    }, 
    (...) 
    ]; 
}