Angular问题：无法从Service获取更新后的值，求排查错误

错误点梳理 #

1. Service中未正确修改变量
   concat是字符串的非突变方法，仅返回新字符串，不会修改原变量。你的modifyText方法仅调用this.text.concat(word)，但未将结果赋值回this.text，导致Service内的text始终是初始值'one'。

2. 组件中值未实时同步
   组件的value仅在ngOnInit中初始化赋值一次，后续Service的text变化后，value不会自动更新，模板显示的始终是初始值。

3. 组件重复注入Service实例
   组件元数据中添加providers: [DataService]，会覆盖providedIn: 'root'的单例配置，导致组件使用局部实例而非全局单例（虽非当前问题核心，但建议移除以保持单例特性）。

修正后的代码 #

修正DataService

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

@Injectable({
  providedIn: 'root'
})
export class DataService {
  private text = 'one';
  
  getText() {
    return this.text;
  }
  
  modifyText(word: string) {
    // 将concat结果赋值回原变量，真正修改text的值
    this.text = this.text.concat(word);
  }
}

修正ParentComponent（使用getter实时取值）

@Component({
  selector: 'app-parent',
  // 移除providers，使用root单例
  template: `
  <p>{{value}}</p>
  <p>{{changeText('two')}}</p>
  `,
})

export class ParentComponent {
  // 通过getter实时从Service获取最新值
  get value() {
    return this.dataService.getText();
  }
  
  constructor(private dataService: DataService) { }
  
  changeText(word: string) {
    this.dataService.modifyText(word);
  }
}

补充说明 #

• 使用getter后，模板每次渲染都会调用getText()获取Service中的最新值，无需手动更新value。
• 若不想用getter，也可在changeText方法中手动更新value：

  changeText(word: string) {
    this.dataService.modifyText(word);
    this.value = this.dataService.getText();
  }
  

  但需确保每次修改后都执行赋值操作，不如getter简洁。

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