嘿Lars，完全可以在Angular 9里实现这些事件的监听，这里有两种常用的方式，操作起来都很简单：

方法1：直接在模板中绑定事件 #

Angular支持直接绑定原生DOM事件，而animateMotion的begin、repeat、end都是标准的SVG动画事件，所以你可以直接在模板里用括号语法绑定：

<svg>
  <circle r="15" fill="red">
    <animateMotion 
      #animMotion
      dur="10s" 
      begin="indefinite" 
      repeatCount="indefinite" 
      calcMode="linear" 
      path="M0,0 L100,100 L200,0 Z"
      (begin)="onAnimationBegin()"
      (repeat)="onAnimationRepeat()"
      (end)="onAnimationEnd()"
    />
  </circle>
</svg>

然后在组件类里定义对应的处理方法：

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

@Component({
  selector: 'app-animation-demo',
  templateUrl: './animation-demo.component.html'
})
export class AnimationDemoComponent {
  onAnimationBegin() {
    alert('动画开始啦！');
    // 这里可以替换成你的业务逻辑，比如记录日志、更新组件状态等
  }

  onAnimationRepeat() {
    alert('动画重复触发了！');
  }

  onAnimationEnd() {
    alert('动画结束了！');
  }
}

方法2：通过ViewChild在组件类中绑定事件 #

如果你需要在组件类里主动控制动画（比如手动触发开始/暂停），可以用@ViewChild获取animateMotion元素实例，再手动绑定事件：

模板部分 #

<svg>
  <circle r="15" fill="red">
    <animateMotion 
      #animMotion
      dur="10s" 
      begin="indefinite" 
      repeatCount="indefinite" 
      calcMode="linear" 
      path="M0,0 L100,100 L200,0 Z"
    />
  </circle>
</svg>
<button (click)="startAnimation()">启动动画</button>

组件类部分 #

import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';

@Component({
  selector: 'app-animation-demo',
  templateUrl: './animation-demo.component.html'
})
export class AnimationDemoComponent implements AfterViewInit {
  @ViewChild('animMotion') animMotion!: ElementRef<SVGAnimateMotionElement>;

  ngAfterViewInit() {
    const animElement = this.animMotion.nativeElement;
    
    // 手动绑定事件监听器
    animElement.addEventListener('begin', () => {
      alert('动画开始执行！');
    });

    animElement.addEventListener('repeat', () => {
      alert('动画完成一次循环，开始重复！');
    });

    animElement.addEventListener('end', () => {
      alert('动画全部结束！');
    });
  }

  startAnimation() {
    // 手动触发动画启动（因为begin设为了indefinite）
    this.animMotion.nativeElement.beginElement();
  }
}

小提醒 #

• 因为你设置了begin="indefinite"，动画不会自动启动，需要调用beginElement()方法手动触发（比如上面的按钮点击逻辑）。
• 一定要在ngAfterViewInit生命周期钩子中获取DOM元素，这时候视图已经初始化完成，能确保正确拿到目标元素。

这两种方法都能完美监听animateMotion的三个事件，你可以根据自己的业务场景选合适的方式～

内容的提问来源于stack exchange，提问作者Lars