用ng-content识别Angular 8多反射中的插槽

Question

我正在尝试使用Angular 8构建一个简单的仪表板组件；仪表板中包含的每个项目都可以是任何东西。我构建了两个不同的组件，一个用于仪表板本身(主要容器(，第二个用于识别仪表板中的区域(这将接收窗口小部件组件列表(。

目前我的解决方案非常简单。基本上，我使用 ng-content 在主组件中投射我的变元元素。我向您展示一些代码

通用仪表板容器：

<my-dashboard>
  <my-area widgets="[]"></my-area>
  <my-area widgets="[]"></my-area>
  <my-area widgets="[]"></my-area>
</my-dashboard>

my-dashboard 组件就是这样：

<ng-content></ng-content>

使用这种方法，非常有效，但是我无法访问投影组件的单一范围，例如当我们确切地知道插槽时。例如，如果我想从我的dahboard组件中获取某个组件的信息，则不可能。这是正确的方法吗？我找不到有关文档中内容投影的太多信息。

Answer 1

这是contentChildren或ContentChild Decorator在仪表板组件中的目的：(假设将组件导出为myareAcomponent(

@ContentChildren(MyAreaComponent)
myAreaComponents: QueryList<MyAreaComponent>;
ngAfterContentInit() { // this is where ContentChildren are available
  console.log(this.myAreaComponents);
}