angular – 使用ng-content在父项呈现项目时未填充@ContentChild

面板：

@Component({
selector: "panel",directives: [PanelGroup,PanelItem],template: `
  <panel-group>
    <ng-content select="panel-item"></ng-content>
  </panel-group>
`})

export default class Panel {}

panelGroup中：

@Component({
selector: "panel-group",directives: [forwardRef(() => PanelItem)],template: `
  <ul>
    <ng-content></ng-content>
  </ul>`
})

export default class PanelGroup {
  @ContentChildren(forwardRef(() => PanelItem)) items;

  //I need to access children here and modify them eventually:
  ngAfterContentInit() {
    console.log(this.items.toArray()); //the array is always empty
  }
}

PanelItem：

@Component({
selector: "panel-item",directives: [forwardRef(() => PanelGroup)],template: `
  <li>
    <span (click)="onClick()">
        {{title}}
    </span>
    <panel-group>
        <ng-content select="panel-item"></ng-content>
    </panel-group>
  </li>`
})

export default class PanelItem {
  @Input() title = 'SomeTitle';
}

如上例所示,我尝试在PanelGroup组件中获取内容子项,但集合始终为空.还尝试将选择器添加到其中的“ng-content” – 在这种情况下,子节点永远不会被渲染,这有点奇怪.

我错过了什么吗？

这是插件：

> demo