angular - 如何在 false *ngIf 删除元素之前捕获它？

Question

首先，这是描述我的项目设置的最低限度示例

该项目使用的是 Angular v5，因此它应该可以访问框架中最新的 API。

假设我有一个父组件，它有一个查询列表 ContentChildren

例如

@Component({
    selector: 'parent-component'
    // ... component metadata
})
export class ParentComponent implements AfterContentInit{

    @ContentChildren(ChildDirective) _children: QueryList<ChildDirective>

}

此父组件的模板包含一个 ngContent 选择器，用于查找使用 childDirective 选择器标记的元素

<ng-content select="[childDirective]"></ng-content>

现在这是一个使用父组件的页面组件，使用 ngIf 结构指令动态显示 0 个或多个标记有子指令的组件:

// template for some component class "PageComponent"
<div>
    <!-- 
       This is the parent we defined before 
       And it contains multiple ContentChildren
    -->
    <parent-component> 
        <span childDirective *ngIf="showFirst()">First</span>
        <span childDirective *ngIf="showSecond()">Second</span>
        <span childDirective *ngIf="showThird()">Third</span>
    </parent-component>
</div>

---

这是我要解决的问题

在这个父组件中，我想在任何这些子指令元素离开或进入时编排一个复杂的动画。这超出了使用 AnimationMetadata 的范围，因为有很多条件决定播放哪些动画，所以我需要在代码中执行此操作。

同样，此动画需要在父组件而不是页面组件中编排，因为无论在何处使用父组件，动画都是相同的，并且会在许多地方使用。

通常，我会注入(inject) AnimationBuilder 并根据需要构建动画。这次的问题是因为内容子项正在被 ngIf'd 带走，当 ngIf 为 false 时会立即将它们从页面中删除，我无法在它们离开之前捕获它们并在它们上运行动画。我知道如果我可以在这里使用动画元数据，它会像使用 query(':leave') 一样简单，但如前所述，我不能使用动画元数据来解决这个问题。

鉴于 Angular 提供了一种方法来 Hook 通过元数据离开的元素，我希望在实际的类代码中有一种方法可以做到这一点。我只是不确定如何。

---

总结

当 ContentChild 上的 ngIf 为 false 时，我可以 Hook ，执行动画，然后让 ngIf 在我说它很酷之后完成拿走元素吗？

如果不是，达到这个效果的最优方案是什么？

Answer 1

最近的评论让我再次研究这个问题，因为我一直没有找到满意的解决方案。但是重新审视它我意识到我可以制作自己的结构指令来模拟 ngIf 逻辑并附加一个可用于动画或其他清理的回调，并且只有在回调完成后才将其从 View 中删除。

这是一个可以适应其他用例的快速 hacky 示例

https://stackblitz.com/edit/angular-oex7ah?file=src%2Fapp%2Fanimated-if.directive.ts