recursion - 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。

Answer 1

仅使用模板无法获得所需的结果，因为循环依赖会导致:

EXCEPTION: Unexpected directive value 'undefined' on the View of component 'ChildComponent'

正如您在 this 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 依赖parent 导致循环依赖:

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