Как получить доступ к событиям SVG animateMotion в Angular? - PullRequest
Новая
       35

Как получить доступ к событиям SVG animateMotion в Angular?

0 голосов
/ 09 апреля 2020

Элемент 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? Есть ли способ получить доступ к событиям?

Спасибо заранее, Ларс

1 Ответ

1 голос
/ 09 апреля 2020

Попробуйте обновленный подход ниже, так как мое первоначальное предположение было действительно неточным, так как я не был слишком знаком с этими конкретными c событиями.

Обновление: мое первоначальное предположение состояло в том, что приведенное ниже будет работать - оказался неверным : 

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

Обратите внимание, что * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *} * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * не о ней; * * * *} * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * 100 * * * * * * 's *' '' s "" ... " являются эквивалентными событиями, которые мы можем просто связать в 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)
  }
}

Вот стекаблиц: https://stackblitz.com/edit/angular-px8uf3

...