问题:

@ContentChildren似乎不适用于父<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() { }

}

javascript - Angular2 @ContentChildren未填充在父&lt;ng-content&gt;内部-LMLPHP

最佳答案

ContentChildren将仅计算分配给current Component的指令。对于您的情况,在将test指令分配给ChildComponent时,您应该将指令数计入ChildComponent本身。

请参阅我从您那里得到的plunker

关于javascript - Angular2 @ContentChildren未填充在父<ng-content>内部,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/43600969/

10-11 05:17