动态检测 ng-content 变化答案

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

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

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

<div class="ald-layout__wrapper" [class.ald-layout__wrapper--has-side-panel]="sidebarPresent">
        <!-- CONTENT SLOT -->
        <ng-content select="ald-content"></ng-content>
        <!-- SIDE PANEL SLOT -->
        <ng-content select="ald-side-panel"></ng-content>
    </div>

此组件用法的示例用法：

<ald-layout>
    <ald-content>
        Content here...
    </ald-content>
    <ald-side-panel *ngIf="showSidePanel">
        Side panel content
    </ald-side-panel>
</ald-layout>

当 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 */ }

标签： angular

【解决方案1】：

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

【讨论】：