angular - @ContentChildren 返回空列表，如果内容通过 2 个组件

Question

我有下一个结构：

子组件模板（最简单的）：

   <div>Child</div>
  

父组件模板：

  <div><h1>Parent</h1>
    <middle>
        <ng-content></ng-content>
    </middle>
  </div>

正如你所看到的，我们在中间还有一个中间组件模板：

  <div>
    <h1>Middle</h1>
    <ng-content></ng-content>
  </div> 

我正在使用下一种方式：

  <parent>
      <child>hi</child>
      <child>there</child>
  </parent>

问题：我无法在中间组件中获取子组件的 ContentChildren？

angular2应该支持吗？如果不是，那为什么？

Plnkr 演示- 在控制台中查看输出

Answer 1

后代- 真包括所有后代，否则只包括直接孩子。

@Component({
    selector: 'parent',
    directives: [ Middle],
    template: `<div><h1>Parent</h1>
        <middle>
            <ng-content></ng-content>
        </middle>
      </div>`
})
export class Parent {
    @ContentChildren(Child, { descendants: true }) children: QueryList<Child>;
    ngAfterContentInit() {
        console.log(this.children.length);
    }
}

Answer 2

中没有内容子级Middle，它们直接传递到最外层<ng-content>。

如果您将 a作为Child的Parent子级传递Middle，您会在中间得到一个 contentchild。

Plunker 示例

您可以使用选择器<ng-content select="...">来指定应将哪些元素投影到哪个<ng-content>