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

Question

我是 Js 的新手，我正在尝试创建一个简单的应用程序，我需要在动画完成后调用 Angular 组件函数。对于动画，我使用的是anime.js，我使用的是Angular 框架来创建这个应用程序。

我在 ngAfterViewInit 函数中添加了动画代码，我想在anime.js 的complete 回调中调用Angular 组件的showOptions() 函数。 但是在 complete 回调中我无法访问这个组件函数。我尝试定义组件对象 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.');
}