动态检测 ng-content 变化

【问题标题】：Detect ng-content changes dynamically动态检测 ng-content 变化
【发布时间】：2022-12-22 04:07:34
【问题描述】：

我有一种情况，我想在组件中检测其模板内的 <ng-content> 元素是否动态填充了任何内容。

所以在一个组件中考虑这个标记

此组件用法的示例用法：


    
        Content here...
    
    
        Side panel content

当 DOM 中存在 ald-side-panel 时，我希望能够在 ald-layout 组件中进行检测。

我想知道如何使用服务来跟踪侧面板的可见性\存在状态，但想知道是否有更好的模式\方法可以在这里使用？

我会选择服务，因为 Angular 中的 @Output 事件不会传播到其父级的边界之外。
@ContentChildren(ComponentType) 可能是你的朋友。 Example
请注意，如果需要触发器，您甚至可以使用设置器： @ContentChildren(ComponentType) set childComponents(value: any[]) { /* yay, we've detected added/removed child components */ }

【解决方案1】：

如果您使用 @ContentChildren ，您将获得类型为 QueryList 的属性/集合。您可以使用 notifyOnChanges 订阅此可观察内容子项的更改

【讨论】：