recursion - Angular2递归组件

Question

我正在尝试部署这些帖子和 plnkr 中讨论的递归组件：

如何将父组件注入子组件？

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

javascript中的Angular2递归模板

但是，提供的解决方案只处理组件对象本身，并没有解决组件应该实例化的 HTML 标记的问题。

子组件如何<parent> ... </parent>在其模板中使用 html 标签？

我将非常感谢您的帮助，也许您可​​以提供一个 plunkr/fiddle。

Answer 1

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

例外：组件“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 依赖于 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 来实现这一点，正如您在本示例中看到的那样，但请记住提供某种条件来停止无休止的组件渲染。在我的示例中，条件是父组件中的输入参数：

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