TEMA:

@ContentChildren no parece funcionar en los contenedores Parent <ng-content> . Incluso si el contenido es un elemento secundario del componente.

Plunker: https://plnkr.co/edit/J5itJmDfwKwtBsG6IveP?p=preview

NOTA : estoy usando {descendants: true}

Código de ejemplo:

HTML principal:

 <div> <child> <test></test> <test></test> <test></test> </child> <br><br> <parent> <test></test> <test></test> <test></test> </parent> </div>

Componente hijo:

 <h2>Child</h2> <parent> <ng-content></ng-content> </parent>

Componente principal:

 <h3>Parent</h3> <ng-content></ng-content> <div class='length'>Line count : {{length}}</div>

Problema La longitud del componente de test es 0 para el componente secundario, pero 3 para el componente principal.

Código detallado:

 import { Component, ContentChildren, Directive } from '@angular/core'; @Directive({selector: 'test'}) export class Test {} @Component({ selector: 'parent', template: ` <h3>Parent</h3> <ng-content></ng-content> <div class='length'>Line count : {{length}}</div> ` }) export class ParentComponent { @ContentChildren(Test, {descendants: true}) private tests : QueryList<Test>; constructor() { } get length () { return this.tests.length; } }

 import { Component } from '@angular/core'; @Component({ selector: 'child', template: ` <h2>Child</h2> <parent> <ng-content></ng-content> </parent> ` }) export class ChildComponent { constructor() { } }