Angular2递归组件

Question

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

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

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

javascript中的Angular2递归模板

但是,提供的解决方案仅处理组件对象本身,并且不解决组件应该实例化的HTML标记的问题.

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

我会非常感谢您的帮助,也许是您可以提供的笨拙/小提琴.

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 依赖于父组件，这会导致循环依赖：

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