在同级组件Angular 5之间传递对象{}

Question

I'm not sure what I'm doing wrong here...

Basically I have 2 sibling components the first component gets some data and I want to share that data with the sibling component so I have made a service

service

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';

@Injectable()
export class DataService {
    // Individual Data Source
    private dataSource = new BehaviorSubject<Object>({});
    // Individual Data Source
    data = this.dataSource.asObservable();
    // Individual Data Source
    updateData(data) {
        this.dataSource.next(data);
    }
}

then in my first component...

this.activatedRoute.params.subscribe(params => {
  this.id = params.id;
  this._dataNotification.getSingledataNotification(this.id)
    .subscribe(result => {
      this.data = result;
      this._dataService.updateData(this.data);
    });
});

then in my second component..

getData() {
    this._dataService.data.subscribe((result) => {
        this.data = result;
        console.log(this.data);
    });
}

basically what Is happening is in my first component im getting data object back and passing it to the updateData function then In my second component Im getting that data but when I console log I only get back an empty object??

any ideas what I'm doing wrong?

EDIT

I put the updateData function in a onChanges lifecycle event and now It works..

Thanks Guys

Answer 1

This one creates a service to handle the message events.

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { Subject } from 'rxjs/Subject';

@Injectable()
export class MessageService {
  private subject = new Subject<Message>();

  send(key: string, value: any) {
    this.subject.next({ key, value });
  }

  get(): Observable<Message> {
    return this.subject.asObservable();
  }
}

class Message {
  constructor(
    public key: string,
    public value: any) { }
}

---

This one listen to the events and when get the events execute sth.

import { Subscription } from 'rxjs/Subscription';
private subscription: Subscription;

constructor(
  private messageService: MessageService,
) {}

ngOnInit() {
  this.subscription = this.messageService.get().subscribe(message => {
    if (message.key === 'what message you want') {
      this.dosth()
    }
  });
}

---

When you want to send the object from one service to another service, call the send in the message service and subscribe in the service you want.

Answer 2

I faced the similar problem when I had to implement the identical scenario.

The solution to it is that, you should not receive the data in the receiving component inside the onInit() method. Rather, receive it through an onChanges() method or through an event (like a button click ). It will return you the object with values in it.