在没有包装器 ViewChild 的情况下从组件代码访问 ng-content

Question

假设我有一个名为RecursiveComponent的组件(带有一个名为recursive的选择器(。它有一个数字"标识符"作为输入，并在其主体中接受更多的递归组件。因此，使用此组件的 HTML 代码可能如下所示：

<recursive identifier="1">
<recursive identifier="2">
<recursive identifier="3"></recursive>
</recursive>
<recursive identifier="4"></recursive>
</recursive>

为简单起见，组件仅输出">标识符有x 个子项"，然后通过<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 内容？这感觉就像一个黑客。

工作演示：https://stackblitz.com/edit/angular-wz8zu6

Answer 1

我认为这可能是您可以做这样的事情的唯一方法，您需要访问 DOM 中的元素。然而，还有另一种(可能更好(的方法可以做到这一点@ViewChildren。

您可以使用 ViewChildren 获取元素的查询列表或 来自视图 DOM 的指令。任何时候添加子元素时， 删除或移动，查询列表将更新，更改 查询列表的可观察性将发出一个新值。

https://angular.io/api/core/ViewChildren#viewchildren