如何访问 Angular 中的 SVG animateMotion 事件？

Question

animateMotion 元素触发三个事件：onbegin、onrepeat 和 onend。在纯 Javascript 中，我可以像这样绑定一个事件监听器：

<circle r="15" fill="red">
    <animateMotion
        dur="10s" 
        begin="indefinite" 
        repeatCount="indefinite" 
        calcMode="linear"
        repeatCount="indefinite" 
        path="...."
    />
</circle>


var anim = document.getElementsByTagName("animateMotion");

anim.onrepeat = function() {
    alert("repeat")
}
anim.onbegin = function() {
    alert("start")
}
anim.onend = function() {
    alert("end")
}

但是我怎样才能在 Angular 9 中访问这些事件？有什么方法可以访问这些事件吗？

提前致谢，拉斯

Answer 1

尝试下面的更新方法，因为我最初的假设确实不准确，因为我对那些具体事件不太熟悉。

更新：我最初的假设是以下会起作用 - 被证明是错误的：

<svg:circle r="15" fill="red">
    <svg:animateMotion (repeat)="repeatMethodInsideTs()"
        dur="10s" 
        begin="indefinite" 
        repeatCount="indefinite" 
        calcMode="linear"
        repeatCount="indefinite" 
        path="...."
    />
</svg:circle>

请注意，在您的模板中，svg 的 XML 每个标签应具有 "svg"。

然后我决定仍然看看是否有我们可以以干净的方式在 angular 中绑定到的等效事件和中提琴：

<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
  <svg:path fill="none" stroke="lightgrey"
    d="M20,50 C20,-50 180,150 180,50 C180-50 20,150 20,50 z" />

  <svg:circle r="5" fill="red">
    <svg:animateMotion (beginEvent)="begin($event)" (repeatEvent)="repeat($event)" dur="3s" repeatCount="indefinite"
      path="M20,50 C20,-50 180,150 180,50 C180-50 20,150 20,50 z" />
  </svg:circle>
</svg>

现在在 ts:

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';

  repeat(event) {
    console.log("repeat event called", event)
  }

  begin(event) {
    console.log("repeat event called", event)
  }
}

这里是 stackblitz：https://stackblitz.com/edit/angular-px8uf3

如何访问 Angular 中的 SVG animateMotion 事件？

How to access SVG animateMotion events in Angular?

svg

svg-animate

angular