【发布时间】：2018-01-16 21:13:25
【问题描述】：
首先，这是描述我的项目设置的最简单示例
此项目使用 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 的范围，因为有很多条件决定播放哪些动画，所以我需要在代码中执行此操作。
同样，这个动画需要在父组件而不是页面组件中进行编排，因为无论在哪里使用父组件，动画都是一样的，并且会在很多地方使用。
通常，我会注入 AnimationBuilder 并根据需要构建动画。这次的问题是因为内容子级正在被 ngIf 删除，当 ngIf 为 false 时，它会立即将它们从页面中删除，我无法在它们离开之前捕获它们并在它们上运行动画。我知道我是否可以在这里使用动画元数据，就像使用 query(':leave') 一样简单，但如前所述，我不能使用动画元数据来解决这个问题。
看到角度提供了一种方法来挂钩通过元数据离开的元素，我希望在实际的类代码中有一种方法可以做到这一点。我只是不确定如何。
总结
我可以在 ContentChild 上的 ngIf 为 false 时挂钩，执行动画，然后在我说它很酷之后让 ngIf 完成将元素带走吗？
如果不是，达到这个效果的最佳方案是什么？
【问题讨论】：
-
如果您不想从 DOM 中删除，请使用 [style.display]="'none'"
-
我希望它从 DOM 中删除。如果这绝对不可能，我可以解决样式问题，但我更喜欢干净的 DOM 删除。
-
@tt9 你找到解决方案了吗？
-
@istibekesi 我从来没有为这种为离开 *ngIf 元素添加动画的特定实现找到解决方案。我找到了使动画元数据工作的方法，这需要大量声明并且可能难以阅读，但它可以工作。还回退到使用诸如 display: none 在某些情况下就足够了。我没有尝试过但可能可行的一种方法是构建我自己的结构指令，例如 *ngIfAnimated，我使用 ngIf 逻辑但能够传入动画。