Question

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

这是我的服务

<div class="form-group">
<div class="col-sm-6">
    <label for="exampleInputPassword1"> Select Tutor </label>
        <?php echo($this->Form->input('SubjectTutor.tutor_id', array('options'=>$tutors,'div'=>false, 'label'=>false, "class" => "form-control",'empty'=>'Select Tutor')));?>
</div>
</div>

<div class="form-group">
<div class="col-sm-6">
    <label for="exampleInputPassword1"> Select Standard </label>
        <?php echo ($this->Form->input('Subject.standard_id2', array('options'=>$standards,"div"=>false,"default"=>$standard_id,"label"=>false,"class"=>"form-control",'disabled'=>true))); ?>
</div>
</div>
<div class="form-group">
<div class="col-sm-6">
    <label for="exampleInputPassword1">Select Subject </label>
        <?php echo ($this->Form->input("SubjectTutor.subject_id", array('empty'=>'--Select Subject--', 'options'=>$subjects,"div"=>false,"label"=>false,"class"=>"form-control",'disabled'=>false))); ?>
</div>
</div>      
<div class="form-group">
<div class="col-sm-6">
    <label for="exampleInputPassword1">Province </label>
        <?php echo ($this->Form->input("SubjectTutor.province_id", array('empty'=>'--Select Province--', 'options'=>$provinces,"div"=>false,"default"=>$province_id,"label"=>false,"class"=>"form-control",'disabled'=>true))); ?>
</div>
</div>          
<div class="form-group">
<div class="col-sm-6">
     <label for="exampleInputPassword1">City </label>
            <?php echo ($this->Form->input("SubjectTutor.city_id", array('empty'=>'--Select City--', 'options'=>$cities,"div"=>false,"default"=>$city_id,"label"=>false,"class"=>"form-control",'disabled'=>true))); ?>
</div>
</div>  
<div class="form-group">
<div class="col-sm-6">
    <label for="exampleInputPassword1">School </label>
        <?php echo ($this->Form->input("SubjectTutor.school_id", array('empty'=>'--Select School--', 'options'=>$schools,"div"=>false,"default"=>$school_id,"label"=>false,"class"=>"form-control",'disabled'=>true))); ?>
</div>
</div>

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

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)

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

Answer 1

根据执行内容的顺序，可能是

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

正在执行

之后

this.ts = tsService.getTs();

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

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

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

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

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

如果不了解您的组件结构，就无法确定究竟发生了什么。

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

这会返回undefined。

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

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

在ComponentA中，它会记录值集。

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

正如官方文件所说

一方面，NgModule中的提供程序在根目录中注册注射器。这意味着每个提供商都在NgModule中注册将在整个申请中提供。

有关详情，请参阅： -

Dependency Injection

NgModule Injectors

希望有所帮助：）

Answer 3

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

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

Angular 2服务获取返回undefined

3 个答案: