Question

我有下一个结构：

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

   <div>Child</div>

父组件模板：

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

正如你所看到的，我们还有一个在中间，中间成分templtate：

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

我正在使用下一个方式：

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

问题：我无法在Middle组件中获取Child组件的ContentChildren？

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

Plnkr Demo - 请参阅控制台中的输出

Answer 1

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

如果你在Child作为Parent的孩子传递Middle，那么你就会得到一个内容孩子。

Plunker example

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

Answer 2

descendants-包含所有后代为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);
    }
}

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

2 个答案: