Angular - 获取父级中 ng-content 组件的句柄答案

【问题标题】：Angular - getting the handle to the ng-content component in the parentAngular - 获取父级中 ng-content 组件的句柄
【发布时间】：2017-05-07 03:44:59
【问题描述】：

我有一个更高级别的通用组件，子组件将实现一个接口。

我需要将子组件的句柄放入更高级别的父组件中。在下面的 sn-p 中，我尝试使用 @viewChild 将 #contentComponent 引用到父组件中（您正在查看父组件的 html），以使其无效。

我还尝试在 ng-content 周围的 div 上使用 elementRef 并查看子项。我找到了 ng-content 的组件 div，但我不知道如何将其转换为组件的引用。

<div style="width: 100%">
  <paper-card [heading]="documentIndex.name" class="mix-browser-container">
    <div>
      <ng-content #contentComponent></ng-content>
    </div>
    <div>
      <paginator #paginator [documentIndex]="documentIndex"></paginator>
    </div>
  </paper-card>
</div>

【问题讨论】：

标签： angular

【解决方案1】：

@viewChild

要访问<ng-content> 标签，您需要使用 ContentChild。

https://angular.io/docs/ts/latest/api/core/index/ContentChild-decorator.html

【讨论】：

这不是假设 ng-content 控件的类型是已知的吗？在我的上下文中，我不知道类型；不过，我可以在子控件上尝试一个界面。
ContentChild 和 ViewChild 应该能够采用像 css 这样的选择器——您可以尝试给 ng-content 一个 ID 或 Class 并以这种方式选择它？