Skorzystaj z rekurencyjnie komponentu, aby utworzyć drzewo.

Question

Czy wiesz, że możliwe jest użycie komponentu w sobie? Jeśli tak, gdzie o tym przeczytać?

mam kolejną sytuację: mieć listę mainItems każdy Główny przedmiot podpunkt (taki sam wygląd jak mainItem), każdy element podrzędny może mieć swój własny podpunkt itp Więc lepiej jest użyć zagnieżdżania, ale jak?

Answer 1

aktualizacja

forwardRef() nie jest wymagane, ponieważ już directives została przeniesiona do NgModule.declarations i dlatego rekurencyjne elementy nie muszą być zarejestrowane na siebie jako directives więcej.

Angular 4.x.x Plunker example

oryginalny

To obsługiwane. Trzeba tylko dodać komponent do directives: [] w jego dekoratorze @Component(). Ponieważ dekorator występuje przed klasą, a klasy nie mogą się odwoływać, zanim zostaną zadeklarowane, wymagane jest 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

Patrz także Inject parent component of the same type as child component

Answer 2

kątowe 4 przykładem cyklicznych elementów: https://plnkr.co/edit/IrW82ye4NKK8cYEPxsFc?p=preview

Fragment połączonego np

//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 {} 

Ta odpowiedź jest Wiki społeczność ponieważ przykładem Link został skopiowany z odpowiedzią Güntera Zochbauer użytkownika. Zawarłem kod w treści pytania, aby uniknąć zgnilizny łącza.