Angular 如何在角度检测ng内容中有多少成分？

现在我有两个组件

//app-row-two
<div>
  <div x-col><ng-content select="[slot=1]"></ng-content></div>
  <div x-col><ng-content select="[slot=2]" ></ng-content></div>
</div>
//app-row-three
<div>
  <div x-col><ng-content select="[slot=1]"></ng-content></div>
  <div x-col><ng-content select="[slot=2]" ></ng-content></div>
  <div x-col><ng-content select="[slot=3]" ></ng-content></div>
</div>

//应用程序第二行
//应用程序第三排

用于两列和三列。当我使用它时，需要写入slot=“1”等。

---

是一种将其合并为一个组件的方法，用于检测ng内容中有多少个组件并创建列？

Angular有一个decorator，使组件能够检测和查询内部子级，它是

ContentChildren

decorator

我创建了一个工作示例，用它来计算ng内容中插入了多少子元素。可以使用指令或基本抽象类

下面是关于这种方法的一些建议

为了能够被检测到，您需要告诉Angular它将如何找到孩子，在这种情况下，我使用的是一个指令：

@指令（{选择器：“[选项]”}）
导出类选项{}
@组成部分({
选择器：“容器”，
模板：`
我有{{childrensLength}}个孩子
`
})
出口级集装箱组件{
@ContentChildren（选项）选项：QueryList；
get childrensLength（）：编号{
返回this.options？this.options.length:0；
}
}

我是可质疑的！
我也是！
我也是。。。
我不可质问

输出：