Question

我有三个组件：Panel，PanelGroup（ul）和PanelItem（li）：

面板：

@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

Answer 1

使用log 'this is a message' do provider Chef::Provider::Log::MyCustomLog end：

descendants: true

另见angular 2 / typescript : get hold of an element in the template

Answer 2

我遇到了类似的问题，但似乎也可以通过从面板项中删除select选项来解决这个问题。我假设因为select =＆＃39; panel-item＆＃39;正在寻找内容，但有一个嵌套对象作为内容。如果你删除限制（在插件示例中）它会显示它。

使用ng-content使用父渲染项时，不会填充@ContentChildren

2 个答案: