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

根据执行任务的顺序，很可能是

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

在执行之后

this.ts = tsService.getTs();

在这种情况下，行为是可以预期的。

至于如何处理这个问题。 一种方法是添加一种方法，使组件可以订阅服务并在ts更改时得到通知，以便它们可以通过执行一些代码来做出反应。 看看RxJS的Subject 。

另一个原因可能是您没有正确提供服务。

例如，如果您向父级和子级组件（直接或不直接）提供服务。 在那种情况下，由于Angular的层次依赖注入 ，第二个提供程序可能会遮盖第一个提供程序。 这意味着一个组件在服务的一个实例中设置值，而另一个组件从另一实例中获取值。 除非您特别需要这种行为，否则仅应在将要使用该组件树的根目录处提供服务。

如果您的组件在父子层次结构中不相关，那么您应该只提供一次服务。 在模块级别。

如果不了解您的组件结构的更多信息，就不可能说出到底发生了什么。

Answer 2

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

providers: [TsService]

这行代码将做什么。 是它会在您的组件开始运行后立即获取服务的新实例。 因此，从第一个组件开始，假设ComponentA将服务变量设置为

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

但是这里ComponentA假设服务的Instnace1。 因此，您已将该值设置为服务的Instance1。 现在，您导航到第二个组件，即ComponentB一旦ComponentB起作用，它就会创建一个新的服务实例，并且该实例可用于ComponentB 。 现在，您的服务有两个实例，一个使用ComponentA ，另一个使用ComponentB 。 但你已经使用设置变量ComponentA所以它不会提供给ComponentB因此

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

这将返回未定义。

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

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

在您的ComponentA ，它将记录该值集。

您的问题的解决方案是共享相同的实例，可以通过在AppModule服务注册为提供者来实现。

正如官方文档所说

一方面，NgModule中的提供者在根注入器中注册。 这意味着在NgModule中注册的每个提供程序都可以在整个应用程序中访问。

有关更多信息，请参考：

依赖注入

NgModule注射器

希望能帮助到你 ：）

Answer 3

您可能使用了两个数据对象实例。 使用一个数据服务来设置和获取数据。然后，您可以访问不同组件中的同一数据对象。

而且，如果您将该服务分别设置为组件的提供者，则它们将作为不同的实例工作。 如果整个应用程序仅需要一个实例，则可以在app.module.ts文件中将该服务设置为提供程序。