angular - 如何将动画绑定(bind)到内容子项并订阅动画事件？

Question

我正在开发一个 Angular 组件，它采用内部内容并且应该将动画附加到内容子元素(例如子元素)。

使用代码如下所示:

<flip-board [frontSide]="'side-2'">
  <flip-side name="side-1">Side 1<flip-side>
  <flip-side name="side-2">Side 2<flip-side>
  <flip-side name="side-3">Side 3<flip-side>
</flip-board>

在 FlipBoard 组件中，我需要:

1. 将动画附加到所有 FlipSide 组件。
2. 监听 FlipSide 的动画事件。

在所有文章和教程中，我发现它展示了如何在模板中而不是在组件代码中附加动画和事件。在我的例子中，模板由组件的使用者传递，我需要分配动画并在组件代码中动态订阅动画事件。

@Component({
  selector: 'flip-board',
  template: '<ng-content></ng-content>',
})
export class FlipBoard {
  @ContentChildren(FlipSide) sides: QueryList<FlipSide>;

  ngAfterContentInit() {
    // TODO: 1. Attach animations to this.sides
    // TODO: 2. Subscribe to animation events of this.sides
  }
}

这可能吗？

Answer 1

关于内容元素动画绑定(bind)，您可以尝试将动画触发器绑定(bind)到父元素。然后，"query()"功能 允许您为来自 css 选择器等的元素设置动画。

有关示例，请查看这篇文章: A New Wave of Animation Features in Angular