Angular2 @ContentChildren не заполняется внутри родительского ‹ng-content›

ПРОБЛЕМА:

@ContentChildren не работает с контейнерами Parent <ng-content>. Даже если содержимое является дочерним элементом компонента.

Планкер: https://plnkr.co/edit/J5itJmDfwKwtBsG6IveP?p=preview

ПРИМЕЧАНИЕ: я использую {descendants: true}

Пример кода:

Основной HTML:

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

Дочерний компонент:

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

Родительский компонент:

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

Проблема Длина компонента test равна 0 для дочернего компонента и 3 для родительского компонента.


Подробный код:

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() { }

}

введите описание изображения здесь


person Kevin Upton    schedule 25.04.2017    source источник
comment
Почему вы поменяли родителя-ребенка? Ребенок должен быть внутри родителя, а не наоборот. Во всяком случае, это точная проблема, с которой я столкнулся. И в документации ничего не сказано, что он не должен работать. angular.io/api/core/ContentChildren :/   -  person Luckylooke    schedule 26.11.2018


Ответы (1)


ContentChildren будет учитывать только директивы, назначенные current Component. В вашей ситуации при назначении директивы test для ChildComponent вы должны учитывать директивы в самом ChildComponent.

обратитесь к этому plunker, который я разветвил от вас.

person Pengyy    schedule 25.04.2017
comment
Это решение работает хорошо. Я чувствую, что angular должен иметь возможность выполнять вышеуказанные функции :( - person Kevin Upton; 26.04.2017
comment
@KevinUpton о, я тоже раньше так себя чувствовал. Но я все еще ничего не нашел после некоторых исследований. - person Pengyy; 26.04.2017