Angular2 özyinelemeli bileşenleri

Question

Ben özyinelemeli bu mesajların ele alındığı gibi bileşenleri ve plnkr dağıtmak çalışıyorum:

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

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

Ancak

Angular2 Recursive Templates in javascript

, çözüm bileşeni nesneler kendilerini başa sadece sağlanan ve bileşenlerin gerçekleştirmesi beklenen HTML etiketlerinin konusunu çözmüyoruz.

Alt öğe, şablonunun içinde <parent> ... </parent> html etiketini nasıl kullanabilir?

Size yardımcı olabileceğiniz yardım ve belki de bir plunkr/fiddle için çok minnettar olurum.

İSTİSNA: Beklenmeyen yönerge değeri senin kadar bileşen 'ChildComponent'

ait View 'tanımsız' döngüsel bağımlılık nedenleri yüzünden

Answer 1

arzulanan sonuç yalnızca şablonları kullanarak mümkün değildir this Plunker numaralı telefondan, bir şeyler yanlış gittiğine dair bir işaret görülebilir (genel DI sorunu, Açısal olmayan).

ParentComponent çocuğa bağımlı:

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

Bunu example gördüğünüz ama unutmayın olarak DynamicComponentLoader kullanarak bunu başarabilirsiniz Ancak: döngüsel bağımlılığı neden olan ebeveyn üzerinde

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 bağımlı sonsuz bileşen oluşturmayı durdurmak için bir çeşit koşul sağlamak.

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