0

我正在尝试使用 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>

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

4

1 回答 1

1

这就是您的仪表板组件中的 ContentChildren 或 ContentChild 装饰器的用途：（假设组件导出为 MyAreaComponent）

@ContentChildren(MyAreaComponent)
myAreaComponents: QueryList<MyAreaComponent>;

ngAfterContentInit() { // this is where ContentChildren are available
  console.log(this.myAreaComponents);
}
于 2019-07-31T15:27:52.010 回答