javascript - Angular 2 服务获取返回未定义

Question

在我当前的项目中，我有一个非常简单的服务，当请求来自第一页时，它会设置一个字符串，并使用相同的服务在第二页中显示它。设置文本工作正常。但是当我调用 get 函数时，它返回未定义。

这是我的服务

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

@Injectable()
export class TsService {

  constructor() { }

  ts: string;

  getTs() : string {
      return this.ts;
  }

  setTs(ts) : void {
      this.ts = ts;
  }

}

在我的第一个组件中，我导入了服务

import { TsService } from './ts.service';

并将其添加到提供程序

providers: [TsService]

并在构造函数中初始化

private tsService: TsService

对于按钮单击，我还设置了一个字符串

this.tService.setTs(form.value.member)

在我的第二个组件中，遵循上述相同的步骤，除了在我分配的构造函数中，如下所示

this.ts = tsService.getTs();

但它给了我未定义的信息。有什么我错过的吗

Answer 1

正如我可以从你的代码中看出的。您已将您的服务注册为组件中的提供者。喜欢

providers: [TsService]

这行代码将做什么。一旦您的组件发挥作用，它就会获取您的服务的新实例。因此，从第一个组件开始，我们可以说 ComponentA您将服务变量设置为

this.tService.setTs(form.value.member)

但是这里ComponentA假设有服务的Instnace1。因此，您已将值设置为服务的 Instance1。现在您导航到第二个组件，例如 ComponentB一旦ComponentB发挥作用的是， Angular 创建了一个新的服务实例，并且该实例可用于 ComponentB 。现在您的服务有两个实例，其中一个带有 ComponentA和一个带有 ComponentB 。但您已使用 ComponentA 设置变量所以 ComponentB 无法使用它因此

this.ts = this.tsService.getTs();

这返回未定义。

为了检查变量是否已设置，您可以尝试

this.tService.setTs(form.value.member);
console.log(this.tsService.getTs());

在你的ComponentA中它将记录设置的值。

解决这个问题的方法是共享同一个实例，这可以通过在AppModule中将服务注册为提供者来实现。 .

正如官方文档所说

On the one hand, a provider in an NgModule is registered in the root injector. That means that every provider registered within an NgModule will be accessible in the entire application.

更多请引用:-

Dependency Injection

NgModule Injectors

希望有帮助:)