访问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 {&nbsp; &nbsp; var textWrapper = document.querySelector('.an-2');&nbsp; &nbsp; textWrapper.innerHTML = textWrapper.textContent.replace(/\S/g, "<span class='letter'>$&</span>");&nbsp; &nbsp; anime.timeline({loop: false})&nbsp; &nbsp; &nbsp; .add({&nbsp; &nbsp; &nbsp; &nbsp; targets: '.an-2 .letter',&nbsp; &nbsp; &nbsp; &nbsp; opacity: [0,1],&nbsp; &nbsp; &nbsp; &nbsp; easing: "easeInOutQuad",&nbsp; &nbsp; &nbsp; &nbsp; duration: 2250,&nbsp; &nbsp; &nbsp; &nbsp; comp: this,&nbsp; &nbsp; &nbsp; &nbsp; delay: (el, i) => 150 * (i+1),&nbsp; &nbsp; &nbsp; &nbsp; complete:(anim) => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log('Completed' + anim);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.comp.showOptions();&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; });&nbsp; }showOptions(){&nbsp; &nbsp;console.log('Show options called.');}