@ContentChildren 与 ng-template答案

【问题标题】：@ContentChildren with ng-template@ContentChildren 与 ng-template
【发布时间】：2018-06-11 17:30:34
【问题描述】：

我想使用@ContentChildren 检索ng-template 中的组件。

在此处查看示例：

https://stackblitz.com/edit/github-ktnw8d-gaquer

我的用例如下：我有两个通用面板，必须在我想使用的每个选项卡视图中显示。这些面板被包装到一个组件中，该组件由各种其他组件调用。对于每个组件，我可以在通用面板之后添加不同的面板。为此，我需要模板的引用（TemplateRef）和组件的引用以获取其值（TabPanel）

在 stackblitz 的控制台中，您可以看到变量 tabPanels 包含两个元素：AppComponent 模板中包含的两个 TabPanel，ng-template 之外。因此，descendants 属性对这些元素运行良好。但是为什么它不适用于ng-template 中注入的面板呢？

我怎样才能做到这一点？

【问题讨论】：

标签： angular

【解决方案1】：

但是为什么它不能与注入到 ng-template 中的面板一起使用呢？

因为 template / ng-template 元素在被显式注入或从其他地方引用之前不会真正呈现到 DOM。 ContentChildren 看不到该 ng-template 元素内的任何内容，因为它对裸 ng-template 标记的解释与 HTML 注释基本相同——那里没有任何内容可供阅读。

如果您想在 ng-template 元素实际渲染/注入某处之前对其进行处理，您需要获取该元素的“TemplateRef”。有几种方法可以做到这一点......我不熟悉 PrimeNG，而且我并不完全清楚你正在尝试做什么（从演示代码中并不明显）所以不幸的是它很难提供比这更多的帮助。：/

我稍微修改了您的代码以演示我在说什么。如果您执行一个简单的 ngIf="false; else goTemplate" 来渲染 ng-template 元素，ContentChildren 可以毫无问题地在这种情况下将其拾取，因为它实际上已渲染到 DOM。

https://stackblitz.com/edit/github-ktnw8d-fjk2mu

【讨论】：

非常感谢您的时间和回答。我真的不知道 ng-template 是如何工作的，现在我知道了。我的用例如下：我有两个通用面板，必须在我要使用的每个面板中显示。这些面板被包装到一个组件中，该组件由各种其他组件调用。对于每个组件，我可以在现有面板之后添加不同的面板。为此，我需要模板的引用（TemplateRef），以及组件的引用来获取它的值