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

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>

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

angular2应该支持它吗？如果没有，那为什么？

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

Answer 1

后代 - 如果为 true，则包括所有后代，否则仅包含 直接儿童。

@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>。

如果你在Parent中以Middle的孩子的身份通过一个Child，你会得到一个满足的孩子在中间。

普伦克示例

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