Angular2再帰的なコンポーネント

Question

私はこれらの記事とplnkrで説明したように再帰的なコンポーネントを展開しようとしています：

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

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

Angular2 Recursive Templates in javascript

しかし、成分のみを扱う提供ソリューションは、オブジェクト自体コンポーネントがインスタンス化するはずのHTMLタグの問題を解決しません。

チャイルドコンポーネントはテンプレート内で<parent> ... </parent> htmlタグをどのように使用できますか？

私は助けを借りて、おそらくplunkr/fiddleに感謝したいと思います。

例外：予期しないディレクティブ値あなたのように、コンポーネントのChildComponent "

の閲覧には「未定義」循環依存の原因があるため

Answer 1

望ましい結果は、テンプレートのみを使用することで可能ではありませんthis Plunkerに見ることができます。これは何かが間違っているという兆候です（一般的なDIの問題ではなく、角度の問題）。

子に依存parentComponentに：循環依存関係が発生し、親に依存

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：

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

あなたはこのexampleに見るが、覚えることができるよう、あなたがDynamicComponentLoaderを使用することによって、これを達成することができますしかし、無限のコンポーネントレンダリングを停止するための何らかの種類の条件を提供します。私の例では条件は親コンポーネントで入力パラメータです：

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; 
}