Angular服务不更新对象的值

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

@Injectable()
export class DataService {
  sharedData: any = { value: '' };

  updateValue(newValue: string) {
    this.sharedData.value = newValue;
  }
}

import { Component } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app-component',
  template: `
    <div>{{ dataService.sharedData.value }}</div>
    <button (click)="updateValue()">Update Value</button>
  `
})
export class MyComponent {
  constructor(public dataService: DataService) {}

  updateValue() {
    this.dataService.updateValue('New Value');
  }
}

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

@Injectable()
export class DataService {
  sharedData: any = { value: '' };

  constructor(private cdr: ChangeDetectorRef) {}

  updateValue(newValue: string) {
    this.sharedData.value = newValue;
    this.cdr.detectChanges();
  }
}