如何在Angular中分解一个值可以改变的全局变量？

// counter.service.ts
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class CounterService {
  private counterValue = 0;

  constructor() { }

  getCounterValue(): number {
    return this.counterValue;
  }

  incrementCounter(): void {
    this.counterValue++;
  }

  decrementCounter(): void {
    this.counterValue--;
  }
}

// app.component.ts
import { Component } from '@angular/core';
import { CounterService } from './counter.service';

@Component({
  selector: 'app-root',
  template: `
    <h1>Counter: {{ counterService.getCounterValue() }}</h1>
    <button (click)="counterService.incrementCounter()">Increment</button>
    <button (click)="counterService.decrementCounter()">Decrement</button>
  `
})
export class AppComponent {
  constructor(public counterService: CounterService) { }
}

import { ChangeDetectorRef } from '@angular/core';

constructor(private counterService: CounterService, private changeDetectorRef: ChangeDetectorRef) { }

incrementCounter(): void {
  this.counterService.incrementCounter();
  this.changeDetectorRef.detectChanges();
}

import { NgZone } from '@angular/core';

constructor(private counterService: CounterService, private ngZone: NgZone) { }

incrementCounter(): void {
  this.ngZone.run(() => {
    this.counterService.incrementCounter();
  });
}