根据输入在Angular中重新绘制画布线

Question

我有一个双向绑定输入，应该给我一个数字，这样我就可以在画布上的一个圆内画线，并与中心成该角度。

I think two-way binding itself is working fine

但是它不会重新绘制画布以形成角度。应用对输入没有反应。如果我自己手动更改degree属性的值，则它确实起作用。我进行了搜索，发现了有关 ngOnChanges（）的信息，但这似乎也不起作用，至少是我尝试使用它的方式。

我的代码：

import { ViewChild, Component, OnInit, ElementRef } from "@angular/core";
import { CircleApp } from "./circleApp";
@Component({
  selector: "app-make-circle",
  templateUrl: "./make-circle.component.html",
  styleUrls: ["./make-circle.component.css"]
})
export class MakeCircleComponent implements OnInit {
  circleApp: CircleApp = {
    degrees: 0 
  };
  @ViewChild("myCanvas") myCanvas: ElementRef;
  public context: CanvasRenderingContext2D;
  constructor() {}
  ngOnInit() {}
  ngAfterViewInit(): void {
    this.context = (this.myCanvas
      .nativeElement as HTMLCanvasElement).getContext("2d");
    this.draw();
  }

  ngOnChanges() {
    this.draw();
  }

  private draw() {
    this.context.beginPath();
    this.context.arc(150, 150, 100, 0, Math.PI * 2);
    this.context.moveTo(150, 150);
    this.context.lineTo(
      Math.cos((-this.circleApp.degrees * Math.PI) / 180) * 100 + 150,
      Math.sin((-this.circleApp.degrees * Math.PI) / 180) * 100 + 150
    );
    this.context.stroke();
  }
}