Angular中setInterval切换状态时动画不生效问题求助

想要实现三个箭头的透明度切换动画，用于引导用户下滑页面。在ngOnInit中使用setInterval，希望页面加载后自动重复执行动画。该方法能正常切换arrowsState变量的状态（控制台输出验证），但动画仅在通过(click)等事件调用showArrows方法时生效，使用setInterval时动画无法正常工作。

组件代码：

@Component({
  selector: 'app-photo-and-name',
  templateUrl: './photo-and-name.component.html',
  styleUrls: ['./photo-and-name.component.css'],
  animations: [
    trigger('animateArrows', [
      state('inactive', style({
        opacity: '1'
      })),
      state('active', style({
        opacity: '0.5',
      })),
      transition('inactive => active', animate('400ms ease-in')),
      transition('active => inactive', animate('400ms ease-in'))
    ])
  ]
})
export class PhotoAndNameComponent implements OnInit {
  arrowsState: string = 'inactive';
  interval: any;

  constructor() { }

  ngOnInit(): void {
    this.interval = setInterval(this.showArrows, 2000);
  }

  showArrows() {
    this.arrowsState = this.arrowsState === 'active' ? 'inactive' : 'active';
    console.log(this.arrowsState);
  }
}

模板代码：

<div class="arrows" [@animateArrows]="arrowsState">
    <mat-icon class="arrow">arrow_drop_down</mat-icon>
    <mat-icon class="arrow">arrow_drop_down</mat-icon>
    <mat-icon class="arrow">arrow_drop_down</mat-icon>
</div>

原因 #

问题出在setInterval的回调函数绑定上——直接传递this.showArrows时，函数内部的this指向全局上下文（浏览器环境中为window），而非组件实例。虽然控制台能输出arrowsState的变化，但实际上修改的并不是组件实例中的变量，Angular的变更检测机制无法感知到状态变化，因此动画不会触发。

解决方法 #

方法1：使用箭头函数包裹调用 #

在setInterval中用箭头函数包裹showArrows调用，确保this指向组件实例：

ngOnInit(): void {
  this.interval = setInterval(() => this.showArrows(), 2000);
}

方法2：在构造函数中绑定上下文 #

提前将showArrows方法的this绑定到组件实例：

constructor() {
  this.showArrows = this.showArrows.bind(this);
}

ngOnInit(): void {
  this.interval = setInterval(this.showArrows, 2000);
}

方法3：将方法定义为箭头函数 #

直接把showArrows定义成箭头函数，从根源避免this指向问题：

showArrows = () => {
  this.arrowsState = this.arrowsState === 'active' ? 'inactive' : 'active';
  console.log(this.arrowsState);
}

ngOnInit(): void {
  this.interval = setInterval(this.showArrows, 2000);
}

额外优化：清除定时器防止内存泄漏 #

在组件销毁时清除定时器，避免内存泄漏：

import { OnInit, OnDestroy } from '@angular/core';

export class PhotoAndNameComponent implements OnInit, OnDestroy {
  // ... 其他代码

  ngOnDestroy(): void {
    clearInterval(this.interval);
  }
}

内容的提问来源于stack exchange，提问作者Alon