这是由于Angular的动画系统在父元素从DOM中移除时不会立即停止子元素的动画，从而导致了这种的情况。为了解决这个问题，我们可以使用@HostListener来监听父级元素的animation.done事件，并在该事件触发时手动停止子元素的动画。

以下是一段示例代码，其中parentAnimationDone()是用来停止子元素动画的方法：

import { Component, HostListener } from '@angular/core';

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.css']
})
export class ParentComponent {

  constructor() { }

  @HostListener('animation.done', ['$event'])
  parentAnimationDone(event) {
    if (event.toState === 'void') {
      const childAnimations = document.getElementsByClassName('child-animation');
      for (let i = 0; i < childAnimations.length; i++) {
        childAnimations[i].classList.remove('child-animation');
        childAnimations[i].classList.add('child-animation-stopped');
      }
    }
  }

}

在父级组件的模板文件中，我们可以为[@parentAnimation]添加状态变化监听器，这样就可以在父级元素动画完成后触发@HostListener中的方法。然后，该方法会查找所有子元素上的.child-animation类，并将其替换为.child-animation-stopped类，从而确保子元素动画停止。

通过这种方法，我们就可以确保在父级元素从DOM中移除时停止所有子元素的动画了。