如何在 Angular 的不同组件中使用注入服务的相同实例？

Question

我目前正在尝试从不同组件访问服务中变量的实时值。

在我的服务中，我有：

export class ServiceA {
  serviceVar = "hello";

  constructor(private httpClient: HttpClient) {
  }

  getServiceVar(){
    return this.serviceVar
  }

  setServiceVar(newVar){
    this.serviceVar = newVar;
  }

在组件 AI 中有：

export class ComponentA implements OnInit {
  constructor(private service: ServiceA) {}

  setVar() {
    this.service.setServiceVar("new value from A")
  }

  getVar(){
    console.log(this.service.getServiceVar())
  }
}

在组件 BI 中有：

export class ComponentB implements OnInit {
  constructor(private service: ServiceA) {}

  setVar() {
    this.service.setServiceVar("new value from B")
  }

  getVar(){
    console.log(this.service.getServiceVar())
  }

}

在 app.module.ts

providers: [ServiceA]

如果我在 ComponentA 中设置变量，我希望以某种方式更新 ServiceA 的变量，以便如果 ComponentB 尝试 get() 该值，它会收到 ComponentA 更新服务所用的值。 本质上让 ComponentA 和 ComponentB 使用相同的服务实例。

现在发生的事情是有 2 个 ServiceA 实例，当 ComponentA 运行 setVar() 时，更改仅应用于 ComponentA 的服务实例，而不应用于 ComponentB 的服务实例。

Answer 1

我可以看到你的代码是完全正确的，因为你已经注册了服务 app.module.ts。 所以，会有一个服务的单例实例。

您唯一需要更正的是服务类，您需要在其中添加名为电子表格 ID 的属性。 强文本

export class ServiceA {
  serviceVar = "hello";
  spreadsheetID

  constructor(private httpClient: HttpClient) {
  }

  getServiceVar(){
    return this.spreadsheetID
  }

  setServiceVar(newSpread){
    this.spreadsheetID = newSpread;
  }

Answer 2

答案是让你的服务成为一个提供者，就像我在我的问题中所做的那样......但也要确保你删除

@Injectable({
  providedIn: 'root'
})

并将其更改为：

@Injectable()

在您的服务之上:)