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”。

然后，我决定还是看看是否存在我们可以以简洁的方式和中提琴形式绑定到的等效事件：

<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)
  }
}

这里是堆叠闪电战：https://stackblitz.com/edit/angular-px8uf3

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

1 个答案: