使用服务将数据从组件 A 传递到组件 B - Angular 2答案

【问题标题】：Passing data from Component A to Component B using service - Angular 2使用服务将数据从组件 A 传递到组件 B - Angular 2
【发布时间】：2018-03-29 12:30:55
【问题描述】：

您好，我正在尝试将一个对象从组件 A 传递到另一个兄弟组件 B，并且我正在使用服务来执行此操作，并且我正在使用主题。但是当从服务调用 get 方法时，我无法获取组件 B 中的数据。我不知道我做错了什么。任何帮助都会很棒。我的代码如下 -

层次服务

import { Injectable } from '@angular/core';
import { Http, Headers } from '@angular/http';
import { Subject } from 'rxjs/Subject';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/toPromise';
import 'rxjs/add/operator/map';

@Injectable()
export class HierarchyService {

  private dataObj = new Subject;
  getDataObj = this.dataObj.asObservable();

  constructor () {}

  setData(setData:Object){
    console.log("setData +++ ", setData);
    this.dataObj.next(setData);
  }
}

组件 A 在事件处理程序中，我在代码下方设置 -

this.hierarchyService.setData(treeModel);

组件 B 在 ngOnInit 中，我试图获取我在组件 A 中设置的数据

 this.hierarchyService.getDataObj.subscribe(data => console.log("data ", data));

【问题讨论】：

标签： angular2-services subject

【解决方案1】：

您如何使用您的服务不是很清楚。

您是否在两个组件上都使用 providers: [] ？在这种情况下，两者都使用不同的实例化并且不是单例的，因此无法共享数据。

将您的服务放入 app.module 的 providers 数组中，然后重试。

如果你想使用@Input() @Output() 来共享数据，请看这篇文章Angular component communication by using Input Output decorator

【讨论】：

感谢 Ali，是的，最初我在两个组件的提供程序中添加了我的服务，这就是为什么我无法获取数据的原因，因为每个组件都在创建单例实例。然后我将其删除，然后将其添加到 app.module 中，它工作正常。

【解决方案2】：

我找到了解决方案，我实际上是在注入层次结构服务作为组件 A 和组件 B 的提供者。相反，我只是将服务添加为我的 app.module 的提供者，并将作为提供者从组件 A 和组件 B 中删除，并且它起作用了.

【讨论】：