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

Hi I am trying to pass a object from Component A to another sibling Component B and I am using service to do so and I am using Subject. But when calling the get method from service I am not able to get the data in Component B. I don't know what I am doing wrong. Any help would be great. My code is as below -

嗨，我试图将组件A中的对象传递给另一个兄弟组件B，我正在使用服务这样做，我正在使用主题。但是当从服务调用get方法时，我无法获取组件B中的数据。我不知道我做错了什么。任何帮助都会很棒。我的代码如下 -

Hierarchy Service

层次结构服务

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

Component A Inside a event handler I am setting below code -

组件A在事件处理程序内部我在下面设置代码 -

this.hierarchyService.setData(treeModel);

Component B inside ngOnInit I am trying to get the data that I set in Component A

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

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

2 个解决方案

#1

I found the solution, I was actually injecting the hierarchy service as provider for Component A and Component B. Instead I just added the service as provider for my app.module and removed as providers from Component A and Component B and it worked.

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

#2

How are you using your services is not very clear.

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

Are you using providers: [] on both component? in that case the both uses different instantiation and are not singleton, so data cannot be shared.

你在两个组件上使用提供者：[]吗？在这种情况下，两者都使用不同的实例化而不是单例，因此无法共享数据。

Put your service in providers array in app.module and try again.

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

If you want to use the @Input() @Output() to share the data then see this post Angular component communication by using Input Output decorator

如果你想使用@Input（）@ Output（）来共享数据，那么通过使用输入输出装饰器看看这篇文章的Angular组件通信

#1

#2