访问anime.js回调函数中的Angular组件属性/函数

Question

我是 Js 新手，我正在尝试创建一个简单的应用程序，我需要在动画完成后调用 Angular 组件函数。对于动画，我使用 Anime.js 并使用 Angular 框架来创建这个应用程序。我已经在 ngAfterViewInit 函数中添加了动画代码，并且我想在anime.js 的完整showOptions()回调中调用 Angular 组件的函数。但在完整的回调中，我无法访问此组件函数。我尝试定义组件对象comp，然后尝试在回调函数中使用该对象来调用showOptions函数，但它给出了错误无法读取未定义的属性“showOptions”直接调用showOptions函数也不起作用。我的代码：ngAfterViewInit(): void {    var textWrapper = document.querySelector('.an-2');    textWrapper.innerHTML = textWrapper.textContent.replace(/\S/g, "<span class='letter'>$&</span>");    anime.timeline({loop: false})      .add({        targets: '.an-2 .letter',        opacity: [0,1],        easing: "easeInOutQuad",        duration: 2250,        comp: this,        delay: (el, i) => 150 * (i+1),        complete: function (anim) {          console.log('Completed' + anim);          this.comp.showOptions();        }      });  }showOptions(){   console.log('Show options called.');}

Answer 1

将正常回调更改为箭头函数，如下所示：-

ngAfterViewInit(): void {

    var textWrapper = document.querySelector('.an-2');

    textWrapper.innerHTML = textWrapper.textContent.replace(/\S/g, "<span class='letter'>$&</span>");

    anime.timeline({loop: false})

      .add({

        targets: '.an-2 .letter',

        opacity: [0,1],

        easing: "easeInOutQuad",

        duration: 2250,

        comp: this,

        delay: (el, i) => 150 * (i+1),

        complete:(anim) => {

          console.log('Completed' + anim);

          this.comp.showOptions();

        }

      });

  }

showOptions(){

   console.log('Show options called.');

}