Usa el componente en sí mismo recursivamente para crear un árbol

¿Sabes que es posible usar el componente en sí mismo? Si es así, ¿dónde leer sobre eso?

Tengo la siguiente situación: tengo una lista de elementos principales, cada elemento principal tiene un subítem (el mismo aspecto que el artículo principal), cada subítem puede tener su propio subtítulo, etc. Entonces, es mejor usar el anidamiento, pero ¿cómo?

actualizar

forwardRef() ya no es necesario porque las directives se movieron a NgModule.declarations y, por lo tanto, los componentes recursivos ya no necesitan registrarse en ellos mismos como directives .

Ejemplo Angular 4.xx Plunker

original

Eso apoyó. Solo necesita agregar el componente a las directives: [] en su decorador @Component() . Debido a que el decorador viene antes de la clase y las clases no pueden ser referenciadas antes de que sean declaradas forwardRef() es necesario.

 import {Component, forwardRef, Input} from '@angular/core' @Component({ selector: 'tree-node', template: ` 
{{node.name}}
` }) export class TreeNode { @Input() node; }
 @Component({ selector: 'my-app', template: ` 

Hello {{name}}

`, 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: []}, ]}, ]}; }

Ejemplo de Plunker angular 2.0.0-beta.x

Consulte también Inyectar componente padre del mismo tipo que componente hijo

Ejemplo angular 4 de componentes recursivos: https://plnkr.co/edit/IrW82ye4NKK8cYEPxsFc?p=preview

Extracto del ejemplo vinculado:

 //our root app component import {Component, NgModule, VERSION, Input} from '@angular/core' import {BrowserModule} from '@angular/platform-browser' @Component({ selector: 'tree-node', template: ` 
{{node.name}}
` }) export class TreeNode { @Input() node; } @Component({ selector: 'my-app', providers: [], template: `

Hello {{name}}

` }) 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 {}

Esta respuesta es una wiki de la comunidad porque el enlace de ejemplo se copió de la respuesta de Günter Zöchbauer. Incluí el código en el cuerpo de la pregunta para evitar la rotura del enlace.

Puedes consultar este artículo .

Le ayudará a crear una estructura de árbol sin una biblioteca de terceros. Y funciona recursivamente