Question

首先，这是描述我的项目设置的最基本示例

这个项目正在使用Angular v5，所以它应该可以访问框架中最新的apis。

假设我有一个父组件，其查询列表为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为假时，他们立即将这些内容从页面中删除，我无法在他们离开之前捕获它们并在其上运行动画。我知道如果我可以在这里使用动画元数据，它就像使用query(':leave')一样简单，但如前所述，我不能使用动画元数据来解决这个问题。

看到angular提供了一种方法来挂钩通过元数据离开的元素，我希望有一种方法可以在实际的类代码中执行此操作。我只是不确定如何。

总结

当ContentChild上的ngIf为false时，我可以挂钩，执行动画，然后在我说它很酷之后允许ngIf完成取消该元素吗？

如果没有，达到这种效果的最佳解决方案是什么？

Answer 1

最近的评论使我再次研究此问题，因为我从未找到令人满意的解决方案。但是重新审视它，我意识到我只能在可用于动画或其他清理的回调上模拟ngIf逻辑和粘性的结构指令，并且仅在回调完成后才将其从视图中删除。

这里是一个简短的示例，可以进行调整以适合其他用例

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

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

1 个答案: