如何在树结构中获得子组件的实例到第n级

Question

我希望以递归格式显示header-group组件的实例。 例如： 喜欢  第一个标题组有2个标题组子标题和第2个标题组，在树结构中有1列子项。

这是我的 app.component.html

＆＃13;

＆＃13;

<header-group>
  <header-group>
    <column></column>
  </header-group>
  <header-group>
    <column></column>
  </header-group>
</header-group>

＆＃13;

＆＃13;

＆＃13;

我有2个组件标题和列。

这是我的标题组件

＆＃13;

＆＃13;

/**
 * Created by dattaram on 13/4/18.
 */
import {AfterContentInit, AfterViewInit, Component, ContentChildren, Input, OnInit, QueryList} from '@angular/core';

@Component({
  selector: 'header-group',
  template:`
    <ng-content></ng-content>
  `
})

export class HeaderGroupComponent implements OnInit, AfterContentInit, AfterViewInit {

  @Input() label: any;

  @ContentChildren(HeaderGroupComponent) headerRef: QueryList<HeaderGroupComponent>;

  @ContentChildren(ColumnComponent) columnRef: QueryList<ColumnComponent>;


   data: any[] = [];

  constructor() {
  }

  ngOnInit() {
  }

  ngAfterViewInit() {
    this.data.push(this.headerRef.toArray());
    console.log(this.data);
  }
}

＆＃13;

＆＃13;

＆＃13;

这是我的列组件：

＆＃13;

＆＃13;

import {Input, Component, ContentChild, TemplateRef} from '@angular/core';

@Component({
  selector: 'column', template: `
  I am Column
  `
})
export class ColumnComponent {

  @Input() text: string;
}

＆＃13;

＆＃13;

＆＃13;