Angular2 rxjs 데이터 공유하기

Rxjs를 이용해서 데이터를 공유하는 방법

서비스

// shared-service.ts

import { Observable } from 'rxjs/Observable';

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

import { Subject } from 'rxjs/Subject';

@Injectable()

export class SharedService {

private emitChangeSource = new Subject<any>();

changeEmitted$ = this.emitChangeSource.asObservable();

emitChange(change: any) {

this.emitChangeSource.next(change);

}

}

데이터 보내기

import { Component} from '@angular/core';

@Component({

templateUrl: 'child.html',

styleUrls: ['child.css']

})

export class ChildComponent {

constructor(

private sharedService: SharedService

) { }

onClick(){

    this.sharedService.emitChange('데이터를 보내');

}

}

데이터 받기

import { Component} from '@angular/core';

// import 서비스

@Component({

templateUrl: 'parent.html',

styleUrls: ['parent.css']

})

export class ParentComponent {

constructor(

private sharedService: SharedService

) { }

// 구독

this.sharedService.changeEmitted$.subscribe(data => {

console.log('data: ', data);

})

}