Utilizzare il componente in modo ricorsivo per creare un albero

Question

Sapete è possibile utilizzare il componente in sé stesso? Se sì, dove leggere a riguardo?

Ho situazione successiva: hanno elenco di mainItems, ogni elemento principale è elemento secondario (lo stesso aspetto come mainItem), ogni elemento secondario può avere un proprio elemento secondario ecc Quindi è meglio usare la nidificazione, ma come?

Answer 1

aggiornamento

forwardRef() non è richiesto più perché directives è stato spostato a NgModule.declarations e quindi componenti ricorsive non hanno bisogno di essere registrati su se stessi come directives più.

Angular 4.x.x Plunker example

originale

che ha sostenuto. Hai solo bisogno di aggiungere il componente a directives: [] nel suo decoratore @Component(). Poiché il decoratore viene prima della classe e le classi non possono essere referenziate prima di essere dichiarate è necessario forwardRef().

import {Component, forwardRef, Input} from '@angular/core' 

@Component({ 
    selector: 'tree-node', 
    template: ` 
    <div>{{node.name}}</div> 
    <ul> 
    <li *ngFor="let node of node.children"> 
     <tree-node [node]="node"></tree-node> 
    </li> 
    </ul> 
` 
}) 
export class TreeNode { 
    @Input() node; 
} 

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div> 
     <h2>Hello {{name}}</h2> 
     <tree-node [node]="node"></tree-node> 
    </div> 
    `, 
    directives: [TreeNode] 
}) 
export class App { 
    constructor() { 
    this.name = 'Angular2 (Release Candidate!)' 
    } 

    node = {name: 'root', children: [ 
    {name: 'a', children: []}, 
    {name: 'b', children: []}, 
    {name: 'c', children: [ 
     {name: 'd', children: []}, 
     {name: 'e', children: []}, 
     {name: 'f', children: []}, 
    ]}, 
    ]}; 
} 

Angular 2.0.0-beta.x Plunker example

Vedi anche Inject parent component of the same type as child component

Answer 2

angolare 4 esempio di componenti ricorsive: https://plnkr.co/edit/IrW82ye4NKK8cYEPxsFc?p=preview

Estratto d'esempio:

//our root app component 
import {Component, NgModule, VERSION, Input} from '@angular/core' 
import {BrowserModule} from '@angular/platform-browser' 

@Component({ 
    selector: 'tree-node', 
    template: ` 
    <div>{{node.name}}</div> 
    <ul> 
    <li *ngFor="let node of node.children"> 
     <tree-node [node]="node"></tree-node> 
    </li> 
    </ul> 
` 
}) 
export class TreeNode { 
    @Input() node; 
} 

@Component({ 
    selector: 'my-app', 
    providers: [], 
    template: ` 
    <div> 
     <h2>Hello {{name}}</h2> 
     <tree-node [node]="node"></tree-node> 
    </div> 
    ` 
}) 
export class App { 
    constructor() { 
    this.name = 'Angular2 (Release Candidate!)' 
    } 

    node = {name: 'root', children: [ 
    {name: 'a', children: []}, 
    {name: 'b', children: []}, 
    {name: 'c', children: [ 
     {name: 'd', children: []}, 
     {name: 'e', children: []}, 
     {name: 'f', children: []}, 
    ]}, 
    ]}; 
} 

@NgModule({ 
    imports: [ BrowserModule ], 
    declarations: [ App, TreeNode ], 
    bootstrap: [ App ] 
}) 
export class AppModule {} 

Questa risposta è un wiki comunità perché il collegamento ad esempio è stato copiato da risposta di Günter Zöchbauer. Ho incluso il codice nel corpo della domanda per evitare il link rot.