在app.component中，在动画之后在子组件元素中以角度执行动画

import { Component, OnInit } from '@angular/core';
import { trigger, state, style, animate, transition } from '@angular/animations';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  animations: [
    trigger('rotateAnimation', [
      state('start', style({
        transform: 'rotate(0deg)'
      })),
      state('end', style({
        transform: 'rotate(360deg)'
      })),
      transition('start => end', animate('1s ease-in')),
      transition('end => start', animate('1s ease-out'))
    ])
  ]
})

<div [@rotateAnimation]="animationState" (animationDone)="onAnimationDone()">
  <!-- 子组件元素 -->
</div>

export class AppComponent implements OnInit {
  animationState: string;

  ngOnInit() {
    // 在初始化时触发动画
    this.startAnimation();
  }

  startAnimation() {
    this.animationState = 'start';
  }

  onAnimationDone() {
    // 动画完成后切换状态，以便下次触发动画
    this.animationState = this.animationState === 'start' ? 'end' : 'start';
  }
}