Angular：复用textContent作为Input属性导致动态文本描边指令报错

I’ve run into this exact error before when working with OnChanges—it’s almost always related to how you’re handling input bindings or the SimpleChanges object, not the actual strokeText logic you’re trying to implement. Let’s break down the most common fixes:

1. Ensure Your Input Property is Properly Decorated #

First, double-check that your totalPoints property has the @Input() decorator. If you forget this, Angular won’t recognize it as a bound property, and the SimpleChanges object will behave unexpectedly:

@Directive({ selector: '[appStrokeText]' })
export class StrokeTextDirective implements OnChanges {
  // Don't skip this decorator!
  @Input() totalPoints: number; 

  ngOnChanges(changes: SimpleChanges): void {
    // ... your logic here
  }
}

Also, make sure the property name in the directive matches exactly what’s in your template (it’s case-sensitive!). If your directive uses totalPoints but your template has [totalpoints], Angular won’t bind correctly.

2. Guard Against Undefined Changes in ngOnChanges #

When Angular calls ngOnChanges, the SimpleChanges object might not contain every input property on every run (especially during initialization). Always check if the change exists before accessing its properties:

ngOnChanges(changes: SimpleChanges): void {
  // Check if totalPoints change entry exists first
  if (changes.totalPoints) {
    // Now safely access current/previous values
    const newPoints = changes.totalPoints.currentValue;
    const oldPoints = changes.totalPoints.previousValue;
    
    // Your strokeText logic here
    this.redrawTextWithStroke(newPoints);
  }
}

Skipping this check can lead to trying to access properties on an undefined entry in SimpleChanges, which throws the error you’re seeing.

3. Verify the Template Binding is Not Undefined #

If the value you’re binding to totalPoints in the template is initially undefined or null, Angular’s change detection might throw errors during the initial check. Add a default value to your input to avoid this:

@Input() totalPoints: number = 0; // Default value to prevent undefined

Or use the safe navigation operator in the template if the bound value comes from an object:

<div appStrokeText [totalPoints]="user?.score ?? 0"></div>

4. Debug the SimpleChanges Object #

To get to the root of it, log the entire changes object in ngOnChanges to see what’s actually being passed:

ngOnChanges(changes: SimpleChanges): void {
  console.log('Changes:', changes);
  // ... rest of your code
}

This will show you exactly which properties are present in the SimpleChanges object, and whether totalPoints is being detected correctly.

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