Как анимировать с помощью Canvas в Angular ⇐ Javascript

[Anonymous]

Я пытаюсь написать анимированное колесо выполнения в Angular 20. Моя анимация работает в стандартной среде JavaScript, но при портировании на Angular я постоянно получаю в консоли следующее:

Код: Выделить всё

ERROR TypeError: Cannot read properties of undefined (reading 'maxIterations')
at animate

Я думаю, это как-то связано с контекстом, который имеет функция анимации. Я попытался использовать this.animate.bind(this,arg1,arg2,...) , который исправил вышеуказанную ошибку, но на холсте ничего не отобразилось.
Вот мой компонент. Я пытался создать Stackblitz, но он продолжает выдавать мне ошибки типа «то-то и то-то может быть нулевым», и я тоже не знаю, как их все исправить.
Компонент:

Код: Выделить всё

import {
Component,
computed,
input,
signal,
OnInit,
Signal,
} from '@angular/core';

@Component({
selector: 'app-progress-wheel',
template: `
Unsupported
`,
})
export class ProgressWheelComponent implements OnInit {
public maxProgress = input(1);
public minProgress = input(1);
public completed = input(0);

private progressAngle: Signal = signal(0);
private extraAngle: Signal = signal(0);
private twoPi = 2 * Math.PI;
private maxIterations = 100;
private animationId: number = 0;

constructor() {}

ngOnInit() {
this.initializeAngles();
this.animationId = requestAnimationFrame(this.animate);
}

ngOnDestroy(): void {
if (this.animationId) {
cancelAnimationFrame(this.animationId);
}
}

private initializeAngles(): void {
const extraCompleted = computed(
() => this.minProgress() - this.completed()
);

const amountCompletedFraction = computed(
() => (this.completed() - extraCompleted()) / this.minProgress()
);
this.progressAngle = computed(() => amountCompletedFraction() * this.twoPi);

this.extraAngle = computed(() => extraCompleted() * this.twoPi);
}

private animate(): void {
let i = 0;
let j = 0;
const canvas: HTMLCanvasElement = document.getElementById(
'canvas'
) as HTMLCanvasElement;
const ctx = canvas.getContext('2d');

if (i 

Подробнее здесь: [url]https://stackoverflow.com/questions/79821886/how-to-animate-using-canvas-in-angular[/url]