动态检测 ng-content 变化

分享于2022年12月29日 angular 问答
【问题标题】: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 订阅此可观察内容子项的更改

【讨论】: