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, с которыми должны взаимодействовать компоненты.

Каким образом дочерний компонент может использовать тег html <parent> ... </parent> внутри своего шаблона?

Я был бы очень благодарен вам за помощь и, возможно, plunkr/скрипку, которые вы сможете предложить.

Answer 1

Желаемый результат не представляется возможным, используя только шаблоны, потому что круговые причины зависимостей:

ИСКЛЮЧЕНИЕ: Неожиданное значение директивы «не определено» на Вид компонента «ChildComponent»

как вы может видеть на 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() {} 
} 

Однако вы можете достичь этого с помощью DynamicComponentLoader, как вы можете видеть в этом example, но помните, чтобы обеспечить какое-то условие, чтобы остановить бесконечный рендеринг компонентов. В моем примере условие ввода параметров в родительском компоненте:

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