@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 дочерних компонентов в компоненте Middle?

Должен ли angular2 это поддерживать? Если нет, то почему?

Plnkr Demo - см. Вывод в консоли

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>,

Если вы передаете Child в Parent как дитя MiddleПолучаешь контентчайлда посередине.

Пример плунжера

Вы можете использовать селекторы в <ng-content select="..."> указать, какие элементы должны быть спроецированы на какие <ng-content>