问题:
@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() { }
}
最佳答案
ContentChildren
将仅计算分配给current Component
的指令。对于您的情况,在将test
指令分配给ChildComponent
时,您应该将指令数计入ChildComponent
本身。
请参阅我从您那里得到的plunker。
关于javascript - Angular2 @ContentChildren未填充在父<ng-content>内部,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/43600969/