Angular：不使用@Input，如何借助ngOnChanges实现视图变量变更后更新？

Great question! Let's start with a critical clarification: Angular's ngOnChanges lifecycle hook only triggers automatically for properties decorated with @Input()—it's built to react to parent-to-child input binding changes. For internal component variables (not passed in from a parent), ngOnChanges won't fire on its own. But we can replicate the "react to variable change" behavior you need, while still aligning with Angular's lifecycle system. Here are two practical approaches:

Approach 1: Getter/Setter + ChangeDetectorRef (Recommended for Simple Cases) #

Wrap your target variable in a getter/setter pair. When the variable's value changes, the setter will run, letting you trigger your update logic. If you're using ChangeDetectionStrategy.OnPush, you'll also want to manually notify Angular of the change.

import { Component, ChangeDetectorRef, OnChanges, SimpleChanges } from '@angular/core';

@Component({
  selector: 'app-example',
  template: `
    <p>Original Variable: {{ myVariable }}</p>
    <p>Updated Variable: {{ updatedVariable }}</p>
    <button (click)="updateMyVariable()">Change Value</button>
  `
})
export class ExampleComponent implements OnChanges {
  // Internal variable (not @Input)
  private _myVariable: string = 'Initial Value';
  updatedVariable: string = '';

  constructor(private cdr: ChangeDetectorRef) {}

  // Getter to expose the variable
  get myVariable(): string {
    return this._myVariable;
  }

  // Setter that triggers update logic on change
  set myVariable(newValue: string) {
    // Only run if the value actually changed (avoid unnecessary updates)
    if (newValue !== this._myVariable) {
      this._myVariable = newValue;
      // Run your custom update logic (mirrors ngOnChanges intent)
      this.handleMyVariableChange(newValue);
      // If using OnPush, tell Angular to check for changes
      this.cdr.markForCheck();
    }
  }

  // Custom handler to update your target variable
  private handleMyVariableChange(newValue: string): void {
    this.updatedVariable = `Updated: ${newValue} (${new Date().toLocaleTimeString()})`;
  }

  // ngOnChanges still works for any @Input properties you might have
  ngOnChanges(changes: SimpleChanges): void {
    // Handle @Input changes here if needed
  }

  // Test method to modify the variable
  updateMyVariable(): void {
    this.myVariable = `New Value ${Math.random().toFixed(2)}`;
  }
}

Approach 2: RxJS BehaviorSubject (For Complex/Shared State) #

If you need to listen to variable changes across multiple parts of your component (or even across components), use an RxJS BehaviorSubject. This lets you subscribe to changes and react accordingly, while keeping your state predictable.

import { Component, OnDestroy, OnChanges, SimpleChanges } from '@angular/core';
import { BehaviorSubject, Subscription } from 'rxjs';

@Component({
  selector: 'app-example',
  template: `
    <p>Original Variable: {{ myVariable$ | async }}</p>
    <p>Updated Variable: {{ updatedVariable }}</p>
    <button (click)="updateMyVariable()">Change Value</button>
  `
})
export class ExampleComponent implements OnChanges, OnDestroy {
  // BehaviorSubject holds the current value and emits changes
  private myVariableSubject = new BehaviorSubject<string>('Initial Value');
  // Expose as an observable for the template
  myVariable$ = this.myVariableSubject.asObservable();
  updatedVariable: string = '';
  private subscription: Subscription;

  constructor() {
    // Subscribe to changes in the variable
    this.subscription = this.myVariable$.subscribe(newValue => {
      this.handleMyVariableChange(newValue);
    });
  }

  private handleMyVariableChange(newValue: string): void {
    this.updatedVariable = `Updated: ${newValue} (${new Date().toLocaleTimeString()})`;
  }

  ngOnChanges(changes: SimpleChanges): void {
    // Handle @Input changes here if needed
  }

  ngOnDestroy(): void {
    // Clean up subscription to prevent memory leaks
    this.subscription.unsubscribe();
  }

  updateMyVariable(): void {
    this.myVariableSubject.next(`New Value ${Math.random().toFixed(2)}`);
  }
}

Why Can't We Use ngOnChanges Directly Without @Input? #

To be clear: ngOnChanges is purpose-built by Angular to react to changes in parent-to-child input bindings. Without an @Input() decorator, Angular has no built-in mechanism to detect changes to internal component variables and trigger ngOnChanges for them. The approaches above let you replicate the "react to variable change" behavior while working within Angular's lifecycle rules.

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