Angular 2服务获取返回undefined

在我当前的项目中，我有一个非常简单的服务，它在请求来自第一个页面并使用相同服务在第二个页面中显示请求时设置字符串。设置文本正常工作。但是当我调用get函数时，它返回undefined。Angular 2服务获取返回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();

但它给我没有定义。有什么，我错过了

来源

2017-05-16 Mujahid

我猜的形式有没有价值，当你的构造运行 – Eeks33

它一个值，表单是第一页，它从窗体中获取一个值，当点击按钮时，我将该值设置为服务，在下一个组件中，我得到值 – Mujahid

你可以包含更多的代码吗？或者做一个plunkr？有可能没有足够的地方来找到问题 – Eeks33

，我可以从你的代码做出来。您已将您的服务注册为组件中的提供者。像

providers: [TsService]

这行代码会做什么。是否会在组件进场时立即获取新服务实例？所以从第一个组件可以说ComponentA您设置服务变量

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

但这里ComponentA是具有服务的假设Instnace1。所以您已将该值设置为Service的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

希望它能帮助:)

来源

2017-05-16 06:44:40 Manish

感谢Manish的建议，它工作，我错过了它从开始 – Mujahid

欢迎:) – Manish

根据其中的东西执行的时候可能是

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

正在执行后

this.ts = tsService.getTs();

在这种情况下，行为的顺序预期。

至于如何处理这个问题。一种方法是为组件订购服务添加一种方法，并在ts发生更改时收到通知，以便他们可以通过执行某些代码进行反应。看看RxJS' Subject。

不同的原因可能是您没有正确提供服务。

例如，如果您将服务提供给父级和子级组件（直接与否）。在这种情况下，由于Angular的hierarchical dependency injection，第二个提供商可能会隐藏第一个提供商。这意味着一个组件将在服务的一个实例中设置该值，另一个组件从另一个组件获取该值。除非您特别需要这种行为，否则应仅在将使用组件树的根部提供服务。

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

不知道更多关于您的组件结构，不可能知道究竟发生了什么。

来源

2017-05-16 03:56:17 Rydion

看起来可能是这样的，当我在它显示的构造函数中设置一个随机文本。我将尝试使用RxJS – Mujahid

我已经编辑了答案，并链接到了Angular的文档，他们讨论了组件通信，特别是使用RxJS进行订阅的组件通信。 – Rydion

我只是在想，为什么会出现这种情况，请检查编辑后的答案。 – Rydion

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

如果你设置的服务为您的组件供应商单独那些要去工作的不同实例。如果你只需要一个实例为您的整个应用程序，你可以设置服务的提供商app.module.ts文件。

来源

2017-05-16 05:25:36

Angular 2服务获取返回undefined

回答

相关问题