Angular 2 服务获取 returns 未定义

Question

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

这是我的服务

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 的 hierarchical dependency injection，第二个提供者可能会隐藏第一个提供者。这意味着一个组件在服务的一个实例中设置值，而另一个组件从另一个实例中获取它。除非您特别需要这种行为，否则服务应该只在将要使用它的组件树的根部提供。

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

如果不进一步了解您的组件结构，就不可能知道到底发生了什么。

Answer 2

您可能使用了两个数据对象实例。使用一种数据服务进行设置和获取 data.Then 您可以在不同的组件中访问相同的数据对象。

如果您将该服务设置为单独组件的提供者，它们将作为不同的实例工作。如果您的整个应用只需要一个实例，您可以在 app.module.ts 文件中将该服务设置为提供者。

Answer 3

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

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();

这个 returns 未定义。

为了检查你的变量是否设置了你可以尝试

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

希望对您有所帮助:)

Angular 2 服务获取 returns 未定义

Angular 2 service get returns undefined

javascript

angular2-services

angular