Angular 2服务获取返回undefined-Java 学习之路

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

这是我的服务

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

但它给了我不确定的 . 有什么我错过了

3 回答

1
根据执行内容的顺序，可能就是这样
```
this.tService.setTs(form.value.member)
```
正在执行 after
```
this.ts = tsService.getTs();
```
在这种情况下，行为是预期的 .

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

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

例如，如果您将服务提供给父组件和子组件（直接或非直接） . 在这种情况下，由于Angular的hierarchical dependency injection，第二个提供者可能会遮挡第一个提供者 . 这意味着一个组件在一个服务实例中设置值，而另一个组件从另一个实例获取它 . 除非您特别需要这种行为，否则只应在组件树的根目录中提供服务 .

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

如果不了解您的组件结构，就无法确定究竟发生了什么 .
回复于 2024-04-25T20:55:23+08:00
0

您可能已经使用了两个数据对象实例 . 使用一个数据服务进行设置和获取数据 . 然后您可以访问不同组件中的相同数据对象 .

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

回复于 2024-04-25T20:55:23+08:00
1
我可以从你的代码中得出结论 . 您已将服务注册为组件中的提供程序 . 喜欢
```
providers: [TsService]
```
这行代码将做什么 . 是否会在您的组件发挥作用后立即获取新服务实例 . 所以从第一个组件让我们说 ComponentA 你将服务变量设置为
```
this.tService.setTs(form.value.member)
```
但是这里 ComponentA 假设服务的Instnace1 . 因此，您已将值设置为服务的Instance1 . 现在你导航到第二个组件说 ComponentB 一旦 ComponentB 进入游戏，它就会创建一个新的服务实例，同样可以用于 ComponentB . 现在有两个服务实例，一个用 ComponentA ，另一个用 ComponentB . 但是你已经使用 ComponentA 设置了变量，因此 ComponentB 无法使用它
```
this.ts = this.tsService.getTs();
```
这返回undefined .

为了检查您是否设置了变量，您可以尝试
```
this.tService.setTs(form.value.member);
console.log(this.tsService.getTs());
```
在你的 ComponentA 中它将记录值集 .

您的这个问题的解决方案是共享相同的实例，并且可以通过在 AppModule 中将服务注册为提供程序来实现 .

正如官方文件所说

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

更多请参考： -

Dependency Injection

NgModule Injectors

希望能帮助到你：）
回复于 2024-04-25T20:55:23+08:00

Angular 2服务获取返回undefined

3 回答

相关问题