Angular结合Canvas组件时OnChanges钩子未触发，Canvas无法随输入更新重绘的问题

首先咱们得理清核心原因：Angular的ngOnChanges钩子只有当输入属性的引用发生变化时才会触发。如果你的父组件只是修改了chordData对象内部的Name属性（比如this.chordData.Name = newName），而没有替换整个chordData对象的引用，那么子组件的@Input() chord引用没变，ngOnChanges自然不会执行。而模板里的{{chord.Name}}能更新，是因为Angular的变更检测会深入检查对象内部的属性变化，不管引用有没有变。

接下来给你几个可行的解决方案，你可以根据场景选择：

方案1：父组件更新时创建新的Chord对象（推荐，符合Angular变更检测逻辑） #

每次修改和弦名称时，不要直接修改原对象的属性，而是创建一个新的Chord对象替换原引用。这样子组件的@Input() chord引用发生变化，ngOnChanges就会触发，进而调用draw()重绘。

父组件示例代码：

// 假设父组件的输入框绑定了这个方法
updateChordName(newName: string) {
  // 用扩展运算符创建新对象，保留原有属性并更新Name
  this.chordData = { ...this.chordData, Name: newName };
}

这样你的子组件现有代码不需要修改，ngOnChanges就会正常触发重绘了。

方案2：使用ngDoCheck手动检测属性变化 #

如果不想修改父组件的逻辑，可以在子组件中使用ngDoCheck钩子——它会在每次Angular变更检测周期运行。我们可以保存上一次的和弦名称，对比当前值，发现变化就触发重绘。

子组件修改后的代码：

import { Component, ViewChild, Input, ElementRef, OnChanges, SimpleChanges, DoCheck } from '@angular/core';
import { Chord } from '../models/Chord';

@Component({
 selector: 'chord',
 template: '<div *ngIf="chord">{{chord.Name}}<br/><br/><canvas #canvas width=100 height=100></canvas></div>',
 styleUrls: ['./canvas.component.css']
})
export class CanvasComponent implements OnChanges, DoCheck {
 @Input() chord: Chord | undefined;
 @ViewChild('canvas') canvas: ElementRef<HTMLCanvasElement> | undefined;
 private previousChordName: string | undefined;

 constructor() {}

 ngOnChanges(changes: SimpleChanges): void {
 console.log('changes in canvas');
 this.draw();
 }

 ngDoCheck(): void {
   // 对比当前名称和上一次的名称，变化则重绘
   if (this.chord && this.chord.Name !== this.previousChordName) {
     this.previousChordName = this.chord.Name;
     this.draw();
   }
 }

 ngAfterViewInit(): void {
 this.draw();
 }

 private draw(): void {
 if (this.canvas) {
 let elmnt = this.canvas.nativeElement;
 let ctx = elmnt.getContext('2d');
 if (ctx && this.chord) {
 ctx.fillStyle = '#dddddd';
 ctx.fillRect(0,0,100,100);
 ctx.fillStyle = '#000000';
 ctx.font = '20px Arial';
 ctx.fillText(this.chord.Name, 20, 40);
 }
 }
 }
}

⚠️ 注意：ngDoCheck会非常频繁地运行（每次变更检测都会执行），所以不要在里面放复杂的计算逻辑，避免影响性能。

方案3：将和弦名称单独作为输入属性 #

如果你只需要在Canvas中绘制名称，可以把Name单独拆成一个@Input()属性。因为字符串是基本类型，每次修改都会触发ngOnChanges（基本类型的变化是值的变化，而非引用）。

父组件模板修改：

<chord [chordName]="chordData.Name"></chord>

子组件修改：

@Input() chordName: string | undefined;

ngOnChanges(changes: SimpleChanges): void {
  // 检测chordName的变化
  if (changes.chordName) {
    this.draw();
  }
}

// 调整draw方法中的引用
private draw(): void {
 if (this.canvas && this.chordName) {
 let elmnt = this.canvas.nativeElement;
 let ctx = elmnt.getContext('2d');
 if (ctx) {
 ctx.fillStyle = '#dddddd';
 ctx.fillRect(0,0,100,100);
 ctx.fillStyle = '#000000';
 ctx.font = '20px Arial';
 ctx.fillText(this.chordName, 20, 40);
 }
 }
}

额外的代码改进建议（针对Angular新手） #

1. 遵循TypeScript命名规范：接口属性名建议用小驼峰（比如name而非Name），类成员变量也尽量用小驼峰，保持代码风格一致。
2. 优化空值检查：使用可选链操作符(?.)简化空值判断，比如this.canvas?.nativeElement，让代码更简洁。
3. 提取常量：把绘制用到的颜色、字体、画布尺寸等提取成类的常量，方便后续维护：

   private readonly CANVAS_WIDTH = 100;
   private readonly CANVAS_HEIGHT = 100;
   private readonly BG_COLOR = '#dddddd';
   private readonly TEXT_COLOR = '#000000';
   private readonly TEXT_FONT = '20px Arial';
   

4. 模板绑定变量：画布的宽高可以绑定到类的变量，方便动态修改：

   <canvas #canvas [width]="CANVAS_WIDTH" [height]="CANVAS_HEIGHT"></canvas>
   

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