假设我有一个名为RecursiveComponent的组件(带有一个名为recursive的选择器)。它有一个数字“标识符”作为输入,并在其正文中接受更多的RecursiveComponents。因此,使用此组件的HTML代码可能如下所示:
<recursive identifier="1">
<recursive identifier="2">
<recursive identifier="3"></recursive>
</recursive>
<recursive identifier="4"></recursive>
</recursive>
为简单起见,组件仅输出“identifier has x children”,然后输出通过<ng-content>
完成的插入体。这很有效,但是为了弄清楚有多少个子组件,我必须用ViewChild包装ng-content并查看nativeElement的childNodes,我觉得这有点过分。这就是组件代码的样子:
@Component({
selector: 'recursive',
template: `
{{identifier}} has {{noOfChildren}} children
<div #contentRef>
<ng-content select="recursive"></ng-content>
</div>`
})
export class RecursiveComponent implements OnChanges {
@ViewChild('contentRef', { read: ElementRef }) contentRef: ElementRef;
@Input() identifier: number;
noOfChildren: number;
ngOnChanges() {
if (this.contentRef) {
this.noOfChildren = this.contentRef.nativeElement.childNodes.length;
}
}
}
是否有更好的,更类似Angular的方式来从组件代码中访问ng-content?这感觉就像一个黑客。
我认为这可能是你可以做这样的事情的唯一方法,你需要访问DOM中的元素。然而,使用@ViewChildren还有另一种(可能更好的)方法。
您可以使用ViewChildren从视图DOM中获取元素或指令的QueryList。每次添加,删除或移动子元素时,都将更新查询列表,并且查询列表的可观察更改将发出新值。