Angular2通过服务在两个组件之间传递数据答案

【问题标题】：Angular2 Pass data between two components via serviceAngular2通过服务在两个组件之间传递数据
【发布时间】：2017-08-23 20:42:46
【问题描述】：

您好，我正在尝试将选定的值（来自选项）从第一个组件传递到第二个组件，但我无法获取第二个组件中的值。

我目前正在使用服务来执行此操作，并且正在 console.logging everythign 以查看我是否传递了值。

一切都按我的意图加载，直到第二个组件。

下面是我的代码

第一个组件 HTML

 <p class="fonts-title"> Select Region</p>
 <div class="selectcontainer">
    <select (change)="passValue1()" formControlName="region" class="form- control"  class="selectionbox" [(ngModel)]="selected_region" required> 
  <option *ngFor="let region of regions | filterregion" [ngValue]="region"> 
{{region.areaName}}
</option>
</select>

第一个组件

export class SearchSelectComponent implements OnInit {

  constructor(
    private passData: TeacherPassDataService) { }

  selected_region: string;

  passValue1(val1) {
    this.passData.setValue1(val1=this.selected_region['areaCode'])
  }

服务

@Injectable()
export class TeacherPassDataService {

    value1: string;

    constructor() { 
        this.value1="",
    }

    setValue1(val1: string) {
        this.value1 = val1
        console.log(this.getValue1()) //this prints selected_region value from the first component as I intented
    }

    getValue1() {
        return this.value1;
    }

}

但是，在第二个组件中，

constructor(
        private getVal: TeacherPassDataService) {
    }

   getVal1() {
       return this.getVal.getValue1(),
       this.firstVal=this.getVal1(),
       console.log(this.getVal.getValue1()) //this prints 'undefined'
    }

当我使用服务正确设置值时，为什么我在第二个组件中未定义？

请帮忙！

提前谢谢你

【问题讨论】：

TeacherPassDataService 在哪里设置为提供者？
我尝试从构造函数中删除 value1="" ，但没有成功！
我将 TeacherPassDataService 添加到提供者
@Lea as suraj 说你在哪里提供TeacherPassDataService？喜欢providers: [TeacherPassDataService]
是的，就是这样！

标签： angular service components

【解决方案1】：

可能您没有将服务添加为 appModule 中的 Provider，

@NgModule({
 providers: [
 TeacherPassDataService 
 ]
})

【讨论】：

【解决方案2】：

请参阅附加的工作 plunkr。我试图模仿你的用例。它使用路由加载第二个组件。我相信它应该回答你的问题。请看一看 - https://plnkr.co/edit/w7A8RJeFPYq5rstTfXYF?p=preview

我在 TeacherPassDataService 中使用了以下内容-

this.router.navigate(["/secondComponent"]);

【讨论】：