Angular2 componenti ricorsive

Question

Sto cercando di distribuire i componenti ricorsive come discusso in questi post e plnkr:

How do I inject a parent component into a child component?

> `http://plnkr.co/edit/l7jsV0k7DbGJGXPFlSPr?p=preview` 

Angular2 Recursive Templates in javascript

Tuttavia, le soluzioni fornite solo che fare con se stessi oggetti del componente e non risolvere il problema dei tag HTML con cui i componenti dovrebbero creare un'istanza.

Come può il componente figlio utilizzare il tag html <parent> ... </parent> all'interno del modello?

Sarei molto grato per l'aiuto e forse un plunkr/violino che potresti essere in grado di offrire.

Answer 1

il risultato desiderato non è possibile utilizzando solo i modelli perché le cause dipendenza circolare:

eccezione: il valore di direttiva imprevisto 'undefined' sulla vista del componente 'ChildComponent'

come si può vedere su this Plunker che è un segno che qualcosa è andato storto (problema di DI generale non angolare).

ParentComponent dipendente da bambino:

import {Component} from 'angular2/core'; 
import {AppComponent} from './app.component'; 
import {ChildComponent} from './child.component' 

@Component({ 
    selector: 'parent', 
    template: `<p>parent</p> 
    <child></child>`, 
    directives: [ChildComponent] 
}) 
export class ParentComponent { 
    constructor() {} 
} 

ChildComponent dipende madre che provoca la dipendenza circolare:

import {Component} from 'angular2/core'; 
import {AppComponent} from './app.component'; 
import {ParentComponent} from './parent.component'; 

@Component({ 
    selector: 'child', 
    template: `<p>child</p> 
    <parent></parent>`, 
    directives: [ParentComponent] 
}) 
export class ChildComponent { 
    constructor() {} 
} 

Tuttavia è possibile ottenere questo utilizzando DynamicComponentLoader come si può vedere in questa example ma ricordate per fornire una sorta di condizione per fermare il rendering infinito del componente. Nel mio esempio, la condizione è parametro di ingresso nella componente principale:

import {Component, Input} from 'angular2/core'; 
import {AppComponent} from './app.component'; 
import {ChildComponent} from './child.component' 

@Component({ 
    selector: 'parent', 
    template: `<p>parent</p> 
    <child *ngIf="condition"></child>`, 
    directives: [ChildComponent] 
}) 
export class ParentComponent { 
    constructor() { 
    } 

    @Input() condition: bool; 
}