Angular2 рекурсивные компоненты

Question

Я пытаюсь развернуть рекурсивные компоненты, как обсуждалось в этих постах и ​​plnkr:

Как добавить родительский компонент в дочерний компонент?

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

Angular2 Рекурсивные шаблоны в JavaScript

Однако предоставленные решения имеют дело только с самими объектами-компонентами и не решают проблему тегов HTML, с которыми должны создаваться компоненты.

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

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

Answer 1

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

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

как вы можете видеть на этом Plunker, это признак того, что что-то пошло не так (общая проблема DI, а не Angular).

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, как вы можете видеть в этом примере, но не забудьте предоставить какое-то условие, чтобы остановить бесконечный рендеринг компонента. В моем примере условие является входным параметром в родительском компоненте:

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